Flexslider - different slideshow speed on each slide

Rowan picture Rowan · Nov 7, 2012 · Viewed 47.4k times · Source

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

Answer

nan picture nan · Feb 15, 2013

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.