Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flexslider - different slideshow speed on each slide

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'
    }); 
});
like image 202
Rowan Avatar asked Nov 07 '12 12:11

Rowan


1 Answers

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.

like image 71
nan Avatar answered Nov 08 '22 15:11

nan