jQuery Forum

I am working on a custom image carousel, using jQuery and CSS. My aim is to make it really  lightweight   but with (just) enough features: "bullets", auto-advance, responsiveness.

The slider had a bug (described in detail HERE): when I clicked 2 bullets in rapid succession, the transition would overlap, instead of "standing in line". The fix I found is making all the bullets except the active one non-responsive to clicks,  instead of queueing the clicks :

1. var $elm = $('.slider'),
2.     $slidesContainer = $elm.find('.slider-container'),
3.     slides = $slidesContainer.children('a'),
4.     slidesCount = slides.length,
5.     slideHeight = $(slides[0]).find('img').outerHeight(false),
6.     animationspeed = 1500,
7.     animationInterval = 7000;
8. 
   
9. // Set (initial) z-index for each slide
10. var setZindex = function() {
11.     for (var i = 0; i < slidesCount; i++) {
12.         $(slides[i]).css('z-index', slidesCount - i);
13.     }
14. };
15. setZindex();
16. 
    
17. var displayImageBeforeClick = null;
18. 
    
19. var setActiveSlide = function() {
20.     $(slides).removeClass('active');
21.     $(slides[activeIdx]).addClass('active');
22. };
23. 
    
24. var advanceFunc = function() {
25.     if ($('.slider-nav li.activeSlide').index() + 1 != $('.slider-nav li').length) {
26.         $('.slider-nav li.activeSlide').next().find('a').trigger('click');
27.     } else {
28.         $('.slider-nav li:first').find('a').trigger('click');
29.     }
30. }
31. 
    
32. var autoAdvance = setInterval(advanceFunc, animationInterval);
33. 
    
34. //Set slide height
35. $(slides).css('height', slideHeight);
36. 
    
37. // Append bullets
38. if (slidesCount > 1) {
39.   /* Prepend the slider navigation to the slider
40.      if there are at least 2 slides */
41.   $elm.prepend('<ul class="slider-nav"></ul>');
42.   
43.   // make a bullet for each slide
44.   for (var i = 0; i < slidesCount; i++) {
45.     var bullets = '<li><a href="#">' + i + '</a></li>';
46.     if (i == 0) {
47.       // active bullet
48.       var bullets = '<li class="activeSlide"><a href="#">' + i + '</a></li>';
49.       // active slide
50.       $(slides[0]).addClass('active');
51.     }
52.     $('.slider-nav').append(bullets);
53.   }
54. };
55. 
    
56. var animationStart = false;
57. var slideUpDown = function() {
58.     animationStart = true;
59.     // set top property for all the slides
60.     $(slides).not(displayImageBeforeClick).css('top', slideHeight);
61.     // then animate to the next slide
62.     $(slides[activeIdx]).animate({
63.         'top': 0
64.     }, animationspeed, function() {
65.         animationStart = false;
66.     });
67. 
    
68.     $(displayImageBeforeClick).animate({
69.         'top': "-100%"
70.     }, animationspeed, function() {
71.         animationStart = false;
72.     });
73. };
74. 
    
75. $('.slider-nav a').on('click', function(event) {
76.     if (animationStart) {
77.         return false;
78.     }
79.     displayImageBeforeClick = $(".slider-container .active");
80.     activeIdx = $(this).text();
81.     if ($(slides[activeIdx]).hasClass("active")) {
82.         return false;
83.     }
84.     $('.slider-nav a').closest('li').removeClass('activeSlide');
85.     $(this).closest('li').addClass('activeSlide');
86.     // Reset autoadvance if user clicks bullet
87.     if (event.originalEvent !== undefined) {
88.         clearInterval(autoAdvance);
89.         autoAdvance = setInterval(advanceFunc, animationInterval);
90.     }
91. 
    
92.     setActiveSlide();
93.     slideUpDown();
94. });

I have posted a jsFuddle with all the code HERE .

Questions: How can I queue the clicks? Are there any better alternatives to queueing the clicks?

I have made a horizontal carousel of images (and captions) using Twitter Bootstrap 4 and the perfect-scrollbar plugin.

I want users to be able to navigate by using the mouse wheel. The plugin dos have a handlers option that I did use.

Here is a jsFiddle with what I did so far.

But it does not work the expected way. Like THIS, for instance.

Questions:

1. Am I using it wrong, or does the plugin not have such an option?
2. What alternatives do I have?

I am working on some kind of carousel with items aligned horizontally.

Each of the child elements (there will be about a dozen of them) should stretch one third of the parent's width. Three items should be visible at any one time.

I have used Bootstrap 4, some custom CSS and the Perfect-scrollbar plugin. HERE is a jsFiddle.

It came out pretty nice, except I have been struggling to find a way to set a fixed width (of 300px) for the rail (the gray line) and centering it. How can I do that?

I have a button and an unordered list with its items hidden:

1. <button>Show</button>
2. <ul id="letters">
3.   <li>A</li>
4.   <li>B</li>
5.   <li>C</li>
6. </ul>

I am building an image slider plugin with Next and Previous buttons and an auto advance feature.

The auto advance happens by triggering clicks on the Next button at equal intervals:

1. $(window).on('load', function() {
2.          autoAdvanceInterval = setInterval(function() {
3.             $('#next').trigger('click');
4.          }, settings.pause);
5.          // When a control or dot is clicked by user
6.          // stop autoadvance by clearInterval method 
7.          $('.controls a,.bullets li').click(function(event) {
8.             if (event.originalEvent !== undefined) {
9.               clearInterval(autoAdvanceInterval);
10.            }
11.          });
12.   });

The auto advance stooped working after updating jQuery from v2.0.0 to v3.2.1. I replaced $(window).load() with (window).on('load', ... but it still does not work.

What am I doing wrong? Thank you!

I had made a plugin a while ago, it used jQuery v2.1.1. It worked fine. Since using the modern 3.2.1, the console shows this error:

I have a piece of code like this:

I have made a very light and feature rich jQuery slider plugin. It has a slide left/right transition from one image to the next or previous.

You can see the plugin in action HERE.

It worked very well/as intended until I added bezier transitions to ul.slider for smoothness. Since then, on page load it shows the last image instead of the first. How can I avoid that?

Also, even though the slider should loop (and it does, in the absence of the bezier transitions), it does not loop.

On THIS page, I have a div with the class of “video-wrapper” witch, upon clicking the player’s toggle full screen button, is dynamically added a “full-screen” class.

I aim to remove the “full-screen” class not only by using the toggle full screen button, but by pressing the “Esc” on the keyboard. foe this purpose I have written the code:

$(document).on('keyup',function(evt) {
    if (evt.keyCode == 27 && $('.video-wrapper').hasClass('full-screen')) {
        console.log(evt.keyCode);
        $('.video-wrapper').removeClass("full-screen");
        $('input.fullscreen').removeClass('active');
    }
});

The problem is that this takes two “Esc” key strokes instead of one. The first just exists the browser’s full screen mode and the second removes the “full-screen” class.

How can I exist the browser’s full screen mode and remove the “full-screen” class with one “Esc” key stroke?

On this page I have the MP3-jPlayer WordPress plugin with the Text Skin, slightly modified.

I have deleted the volume bar from the plugin’s html/php structure. I have also added a “seekbar”:

<div class="seekbar-wrapper">
  <div class="seekbar-container">
   <div class="seekbar" value="0" max="1"></div>
  </div>
</div>

I have modified the plugin’s mp3-jplayer-2.7.js file in order to show, for every track (mp3 files), the timeline. After line 403 (jQuery(this.eID.indiM + j).empty().append('<span class="Smp3-tint tintmarg"></span> ' + this.Tformat(pt));) I have added:

var sbContainerWidth = $('.seekbar-container').width();
var progValue = pt / tt * 100;
var progPercentage = progValue + '%';                           
$('#mp3jWrap' + '_' + this.tID).closest('li').find('.seekbar').width(progPercentage);

The result of this is the presence of a progress bar that was missing before.

I have tried to make the seekbar react to a click event and update the track’s "timer:

var sbContainerWidth = $('.seekbar-container').width();
    function skip(ev) {
    pt = ev.pageX -  $('.seekbar-container').offsetLeft; 
}

But unfortunately it does not react to the clicking (and the timeline does not update).

Why? Where is the mistake?

On urbansunsets.com I am streaming online radio from radio.co. It does work, but after a period of continuous playing, there is a delay at the part that shows what is currently playing.

0: 0743127315
1: 072245875
3: 0756129668
4: 0724153333
Uncaught TypeError: Cannot read property 'tel' of undefined

1: 072245875
2: 0756129458
4: 0724153333
Uncaught TypeError: Cannot read property 'tel' of undefined

    {
      "telefoane": [{
        "id": 1,
        "tel": "0743127315"
      }, {
        "id": 2,
        "tel": "072245875"
      }, {
        "id": 3,
        "tel": "0756129458"
      }, {
        "id": 4,
        "tel": "0756129668"
      }, {
        "id": 5,
        "tel": "0724153333"
      }]
    }
    

function showTel() {
    $(".telefon").on('click', function(){
        var index = $(this).closest(".imobil").index();
        var $element = $(this);
        $.ajax({
            url: 'telefoane.json',
            dataType: 'json',
            type : 'get',
            cache : 'false',
            success: function(data){
                var tel = data.telefoane[index].tel;
                console.log(index + ": " + tel);
                $element.parent().find('.telefon .tel').text(tel);
            }
        });
    });
}
showTel();

// Arata telefon
$('.telefon').on('click', function(){
    $(this).children('.vezi').hide();
    $(this).children('.tel').show();
});

I have made an HTML5 responsive, 2 levels menu you can see HERE The wide screen version shows submenus upon hovering over the main menu items; the narrow screen (less then 800px) version shows submenus upon clicking the main menu items.

The problem is that, if I resize the window, the switch between hover and click events does not happen properly. Of course, I want the menu to react at click on mobile devices...

What shall I change in my script? Or is there an already made solution that I can use?

Thank you!