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'
    }); 
});

Dipper

Answer 1

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.

Larentia

Answer 2

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.

Tedesco

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. – Dido

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. – Ammonic

Answer 3

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/

Vulgarian

thanks @tentwofout but the pauseOnHover doesn't work properly, it pause on hover but never resume it. – Cornfield

Answer 4

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);
            }
        }          
    });
  });

Withal

Answer 5

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();
    }
});

Bremsstrahlung

Answer 6

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.

Paraprofessional