Search code examples
jquerybxslider

How to set up slide duration at bxslider


I know I can set the speed of the transition (with speed). But is there any option to set the duration a slide is shown until the transition to the next slide begins?


Solution

  • Using the pause option:

    $('.bxslider').bxSlider({
        pause: 3000
    });
    

    Example:

    http://jsfiddle.net/Yq3RM/202/

    Update

    Another example that modifies the pause for each image. bxSlider doesn't have a nice built in way to do this that I am aware of, however I was able to pull it off in the following way:

    var ImagePauses = [1000,3000,6000,9000,12000,15000];
    
    var slider = $('.bxslider').bxSlider();
    modifyDelay(0);
    
    function modifyDelay(startSlide){
        slider.reloadSlider({
            mode: 'horizontal',
            infiniteLoop: true,
            auto: true,
            autoStart: true,
            autoDirection: 'next',
            autoHover: true,
            pause: ImagePauses[startSlide],
            autoControls: false,
            pager: true,
            pagerType: 'full',
            controls: true,
            captions: true,
            speed: 500,
            startSlide: startSlide,
            onSlideAfter: function($el,oldIndex, newIndex){
                modifyDelay(newIndex);  
            } 
        });
    }
    

    Fiddle