I use the Flexslider plugin to create a slideshow. With the standard behavior, the pause for all slides is the same and is set by the slideshowSpeed parameter. Interested in the question, how can you make each slide have its own pause duration? The documentation did not find the answer to this question.

    1 answer 1

     $(function() { $hook = $('.flexslider'); $hook.flexslider({ animation: $hook.data('animation'), controlNav: $hook.data('control-nav'), slideshow: $hook.data('slideshow'), startAt: $hook.data('start-at'), pauseOnHover: false, after: function(slider) { slider.stop(); slider.vars.slideshowSpeed = $(slider.slides[slider.currentSlide]).data('duration'); slider.play(); } }); }); 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/flexslider-min.css" rel="stylesheet" /> <script src="http://cdnjs.cloudflare.com/ajax/libs/flexslider/2.2.2/jquery.flexslider-min.js"></script> <div class="flexslider" data-animation="fade" data-control-nav="false" data-slideshow="true" data-start-at="0"> <ul class="slides"> <li data-duration="100"> <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_cheesecake_brownie.jpg" alt="Alt" /> </li> <li data-duration="2000"> <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_lemon.jpg" alt="Alt Text" /> </li> <li data-duration="100"> <img src="http://flexslider.woothemes.com/images/kitchen_adventurer_donut.jpg" alt="Alt Text" /> </li> </ul> </div>

    • @ ruslan-k thank you very much, but your method has one bug - when you first show the first slide, the default delay occurs. - Artem