Flexslider - different slideshow speed on each slide

Question

I'm using Flexslider and have been asked to display each slide at a different time depending on how much content it has, so fast for a short sentence and slow for a paragraph. How can I set this up when flexslide allows just 1 Slideshowspeed value. My code:

$(window).load(function() {
        $('#flexslider1').flexslider({
        easing: "swing",  
        animation: "fade",
        slideshowSpeed: 7000,
        animationSpeed: 600,
        startAt: 0,
        initDelay: 0,
        controlNav: true,
        directionNav: true,
        pausePlay: true,
        pauseText: 'Pause',
        playText: 'Play'
    }); 
});

score 10 · Answer 1 · answered Feb 15 '13 at 16:49

I was having the same issue trying to change only the speed of one slide to be different from the others. This is the script I used and it works!

  <script type="text/javascript">
$(window).load(function(){
  $('.flexslider').flexslider({
    animation: "fade",
    slideshowSpeed: 1500,
    animationSpeed: 1000, 
    controlNav: false, 

    start: function(slider){
      slider.removeClass('loading');
    },
    after: function(slider){
        if(slider.currentSlide == 3){
            slider.pause();
            setTimeout(function(){
                slider.play();
            }, 5000);
        }
    }
  });
});

I have 5 images total but I want the 4th slide (slider.currentSlide == 3) to stay longer for 5 secs.

score 6 · Answer 2 · answered Nov 15 '12 at 08:17

6

I think i've found a solution. I use after callback to change the interval of slideshowSpeed:

$(window).load(function(){
      $('.flexslider').flexslider({
        animation: "slide",
        slideshowSpeed: time,
        controlNav: false,
        directionNav: false,
        pauseOnAction: false,
        pauseOnHover: false, 
        pausePlay: true,
        after: function(slider){
            clearInterval(slider.animatedSlides); 
            slider.animatedSlides = setInterval(slider.animateSlides,*YOURTIME in MS*)
        },
        start: function(slider){
          $('body').removeClass('loading');
        }
      }); 
    });

Hope it helps!

Thibaut.

answered Nov 15 '12 at 08:17

Thibaut

61
1

Great solution, thanks. If you wanted to base the *YOURTIME in MS* variable on the contents of the next pane, you can use something like var chars = -80 + slider.slides[slider.animatingTo].innerText.length * 30; (-80 was approximately the length of the markup i was using in the slide, and *30 is a nice multiplier which leaves enough time for the user to view the result). HTH. – keithl8041 Mar 17 '13 at 19:54
This is perfect. I've set up an array with each of the speeds I need for each slide, and the `after` function increments through each item on each slide change. – Simon27 Sep 26 '13 at 15:19

score 5 · Answer 3 · answered Jun 09 '14 at 20:56

Realizing that this is old, but for others looking, as I was, you can also do this: (Using FlexSlider v.2.2.2).

Add a data-duration attribute to the li's

<div class="flexslider" data-animation="fade" data-control-nav="false" data-slideshow="true" data-start-at="0">
    <ul class="slides">
        <li data-duration="6000">
            <img src="http://placehold.it/600x210" alt="Alt" />
        </li>
        <li data-duration="2000">
            <img src="http://placehold.it/600x200" alt="Alt Text" />
        </li>
    </ul>
</div>

And in your page initialization:

$hook = $('.flexslider');
$hook.flexslider({
                    animation: $hook.data('animation'),
                    controlNav: $hook.data('control-nav'),
                    slideshow: $hook.data('slideshow'),
                    startAt: $hook.data('start-at'),
                    pauseOnHover: true,
                    controlNav: false,
                    after: function(slider){
                        // clears the interval
                        slider.stop();
                        // grab the duration to show this slide
                        slider.vars.slideshowSpeed = $(slider.slides[slider.currentSlide]).data('duration');
                        // start the interval
                        slider.play();
                    }
                });

Fiddle here:

http://jsfiddle.net/uzery/3/

thanks @tentwofout but the `pauseOnHover` doesn't work properly, it pause on hover but never resume it. — Mohse Taheri, Mar 13 '19 at 15:08

score 1 · Answer 4 · answered Apr 07 '13 at 20:10

Because AFTER callback CALL after first slide animation, we need add timeout to START callback (for 3 slides):

  $(window).load(function() {        
    $('.flexslider').flexslider({
        animation: "slide",
        controlNav: false,
        directionNav: false,           
        pausePlay: true,
        animationSpeed: 300,
        start: function(slider) {
            clearInterval(slider.animatedSlides);
            slider.animatedSlides = setInterval(slider.animateSlides, YOUR_TIMEOUT_FOR_FIRST_SLIDE(ONLY FOR START));                
        },
        after: function(slider){
            if(slider.currentSlide == 0) {
               clearInterval(slider.animatedSlides); 
               slider.animatedSlides = setInterval(slider.animateSlides, FIRST_TIMEOUT);
            }
            if(slider.currentSlide == 1) {
               clearInterval(slider.animatedSlides); 
               slider.animatedSlides = setInterval(slider.animateSlides, SECOND_TIMEOUT);
            }
            if(slider.currentSlide == 2) {
               clearInterval(slider.animatedSlides); 
               slider.animatedSlides = setInterval(slider.animateSlides, THIRD_TIMEOUT);
            }
        }          
    });
  });

score 1 · Answer 5 · answered Oct 11 '17 at 15:41

Combining two answers from above

$hook = $('.flexslider');
$hook.flexslider({
    animation: $hook.data('animation'),
    controlNav: $hook.data('control-nav'),
    slideshow: $hook.data('slideshow'),
    startAt: $hook.data('start-at'),
    pauseOnHover: true,
    controlNav: false,
    start: function(slider) {
        var start_time = $(slider.slides[slider.currentSlide]).data('duration');
        clearInterval(slider.animatedSlides);
        slider.animatedSlides = setInterval(slider.animateSlides, start_time);
    },
    after: function(slider){
        // clears the interval
        slider.stop();
        // grab the duration to show this slide
        slider.vars.slideshowSpeed = $(slider.slides[slider.currentSlide]).data('duration');
        // start the interval
        slider.play();
    }
});

score 0 · Answer 6 · answered Nov 07 '12 at 12:13

I dont know flexslider but you should be able to modificate speed in after event function callback. Something like that:

$('#flexslider1').flexslider({
easing: "swing",  
animation: "fade",
slideshowSpeed: 7000,
animationSpeed: 600,
startAt: 0, 
initDelay: 0,
controlNav: true,              
directionNav: true,
pausePlay: true,
pauseText: 'Pause',            
playText: 'Play',
after: function(){$(this).flexslider('slideshowSpeed',1000)} 
});

But now, how can you now for which slide you have to change speed. Documentation of flexslider doesn't provide any information about which argument after callback function are passed. And depending how this plugin is coded, its maybe impossible to alter option on the fly, suggesting than you need to destroy the slider and recreate a new one keeping which step/slide is currently shown, weird coding.

So, ill suggest you to contact the main developper of this plugin or try to extend it by your own.

Flexslider - different slideshow speed on each slide

6 Answers6