Restart auto slide after prev/next click

[whatsaross]

When the slider is set to auto, if you click the next, previous, or pager navigation the auto feature stops and never restarts. When you hover over a slide, it will restart. Is there currently a way to do this?

Thanks!

[jmc21]

I have the same question, did you find a solution?

[ashon-ikon]

I thought it was a bug initially then I realized it was an 'Annoying' design issue. Inspecting the code turns out that you have to set

$('#my_slider').bxSlider({
stopAuto: false
});

[ashon-ikon]

Oops! I take my words back it's a bug.

I think the bug is 'forcing' stopAuto when unsure if it's desired and all instances of

    // check if stopAuto argument is supplied
    if(typeof(stopAuto) == 'undefined'){
        var stopAuto = true;
   }

should be changed to

    if (typeof(options.stopAuto) != 'undefined')
        {var stopAuto = options.stopAuto;}
    else
        {var stopAuto = true;}

That way I solved the issue.

Here is the RAW javascript file for inspection and criticism. If good you may use Javascrip Minifier or related to minify it :)

/**
 * jQuery bxSlider v3.0
 * http://bxslider.com
 *
 * Copyright 2011, Steven Wanderski
 * http://bxcreative.com
 *
 * Free to use and abuse under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 */

(function($){

    $.fn.bxSlider = function(options){      

        var defaults = {
            mode: 'horizontal',                                 // 'horizontal', 'vertical', 'fade'
            infiniteLoop: true,                                 // true, false - display first slide after last
            hideControlOnEnd: false,                        // true, false - if true, will hide 'next' control on last slide and 'prev' control on first
            controls: true,                                         // true, false - previous and next controls
            speed: 500,                                                 // integer - in ms, duration of time slide transitions will occupy
            easing: 'swing',                    // used with jquery.easing.1.3.js - see http://gsgd.co.uk/sandbox/jquery/easing/ for available options
            pager: false,                                               // true / false - display a pager
            pagerSelector: null,                                // jQuery selector - element to contain the pager. ex: '#pager'
            pagerType: 'full',                                  // 'full', 'short' - if 'full' pager displays 1,2,3... if 'short' pager displays 1 / 4
            pagerLocation: 'bottom',                        // 'bottom', 'top' - location of pager
            pagerShortSeparator: '/',                       // string - ex: 'of' pager would display 1 of 4
            pagerActiveClass: 'pager-active',       // string - classname attached to the active pager link
            nextText: 'next',                                       // string - text displayed for 'next' control
            nextImage: '',                                          // string - filepath of image used for 'next' control. ex: 'images/next.jpg'
            nextSelector: null,                                 // jQuery selector - element to contain the next control. ex: '#next'
            prevText: 'prev',                                       // string - text displayed for 'previous' control
            prevImage: '',                                          // string - filepath of image used for 'previous' control. ex: 'images/prev.jpg'
            prevSelector: null,                                 // jQuery selector - element to contain the previous control. ex: '#next'
            captions: false,                                        // true, false - display image captions (reads the image 'title' tag)
            captionsSelector: null,                         // jQuery selector - element to contain the captions. ex: '#captions'
            auto: false,                                                // true, false - make slideshow change automatically
            autoDirection: 'next',                          // 'next', 'prev' - direction in which auto show will traverse
            autoControls: false,                                // true, false - show 'start' and 'stop' controls for auto show
            autoControlsSelector: null,                 // jQuery selector - element to contain the auto controls. ex: '#auto-controls'
            autoStart: true,                                        // true, false - if false show will wait for 'start' control to activate
            autoHover: false,                                       // true, false - if true show will pause on mouseover
            autoDelay: 0,                       // integer - in ms, the amount of time before starting the auto show
            pause: 3000,                                                // integer - in ms, the duration between each slide transition
            startText: 'start',                                 // string - text displayed for 'start' control
            startImage: '',                                         // string - filepath of image used for 'start' control. ex: 'images/start.jpg'
            stopText: 'stop',                                       // string - text displayed for 'stop' control
            stopImage: '',                                          // string - filepath of image used for 'stop' control. ex: 'images/stop.jpg'
            ticker: false,                                          // true, false - continuous motion ticker mode (think news ticker)
                                                                                    // note: autoControls, autoControlsSelector, and autoHover apply to ticker!
            tickerSpeed: 5000,                                // float - use value between 1 and 5000 to determine ticker speed - the smaller the value the faster the ticker speed
            tickerDirection: 'next',                        // 'next', 'prev' - direction in which ticker show will traverse
            tickerHover: false,                 // true, false - if true ticker will pause on mouseover
            wrapperClass: 'bx-wrapper',                 // string - classname attached to the slider wraper
            startingSlide: 0,                                   // integer - show will start on specified slide. note: slides are zero based!
            displaySlideQty: 1,                                 // integer - number of slides to display at once
            moveSlideQty: 1,                                        // integer - number of slides to move at once
            randomStart: false,                                 // true, false - if true show will start on a random slide
            onBeforeSlide: function(){},                // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
            onAfterSlide: function(){},                 // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
            onLastSlide: function(){},                  // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
            onFirstSlide: function(){},                 // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
            onNextSlide: function(){},                  // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
            onPrevSlide: function(){},                  // function(currentSlideNumber, totalSlideQty, currentSlideHtmlObject) - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
            buildPager: null                                        // function(slideIndex, slideHtmlObject){ return string; } - advanced use only! see the tutorial here: http://bxslider.com/custom-pager
        }

        var options = $.extend(defaults, options);

        // cache the base element
        var base = this;
        // initialize (and localize) all variables
        var $parent = '';
        var $origElement = '';
        var $children = '';
        var $outerWrapper = '';
        var $firstChild = '';
        var childrenWidth = '';
        var childrenOuterWidth = '';
        var wrapperWidth = '';
        var wrapperHeight = '';
        var $pager = '';    
        var interval = '';
        var $autoControls = '';
        var $stopHtml = '';
        var $startContent = '';
        var $stopContent = '';
        var autoPlaying = true;
        var loaded = false;
        var childrenMaxWidth = 0;
        var childrenMaxHeight = 0;
        var currentSlide = 0;   
        var origLeft = 0;
        var origTop = 0;
        var origShowWidth = 0;
        var origShowHeight = 0;
        var tickerLeft = 0;
        var tickerTop = 0;
        var isWorking = false;

        var firstSlide = 0;
        var lastSlide = $children.length - 1;
        var stopAuto = false;

        // PUBLIC FUNCTIONS

        /**
         * Go to specified slide
         */     
        this.goToSlide = function(number, stopAuto){
            if(!isWorking){
                isWorking = true;
                // set current slide to argument
                currentSlide = number;
                options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide));
                // check if stopAuto argument is supplied
                if(typeof(stopAuto) == 'undefined'){
                    if (typeof(options.stopAuto) != 'undefined')
                        {var stopAuto = options.stopAuto;}
                    else
                        {var stopAuto = true;}
                }
                if(stopAuto){
                    // if show is auto playing, stop it
                    if(options.auto){
                        base.stopShow(true);
                    }
                }           
                slide = number;
                // check for first slide callback
                if(slide == firstSlide){
                    options.onFirstSlide(currentSlide, $children.length, $children.eq(currentSlide));
                }
                // check for last slide callback
                if(slide == lastSlide){
                    options.onLastSlide(currentSlide, $children.length, $children.eq(currentSlide));
                }
                // horizontal
                if(options.mode == 'horizontal'){
                    $parent.animate({'left': '-'+getSlidePosition(slide, 'left')+'px'}, options.speed, options.easing, function(){
                        isWorking = false;
                        // perform the callback function
                        options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
                    });
                // vertical
                }else if(options.mode == 'vertical'){
                    $parent.animate({'top': '-'+getSlidePosition(slide, 'top')+'px'}, options.speed, options.easing, function(){
                        isWorking = false;
                        // perform the callback function
                        options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
                    });         
                // fade 
                }else if(options.mode == 'fade'){
                    setChildrenFade();
                }
                // check to remove controls on last/first slide
                checkEndControls();
                // accomodate multi slides
                if(options.moveSlideQty > 1){
                    number = Math.floor(number / options.moveSlideQty);
                }
                // make the current slide active
                makeSlideActive(number);
                // display the caption
                showCaptions();
            }
        }

        /**
         * Go to next slide
         */     
        this.goToNextSlide = function(stopAuto){
            // check if stopAuto argument is supplied
            if(typeof(stopAuto) == 'undefined'){
                if (typeof(options.stopAuto) != 'undefined')
                    {var stopAuto = options.stopAuto;}
                else
                    {var stopAuto = true;}
            }
            if(stopAuto){
                // if show is auto playing, stop it
                if(options.auto){
                    base.stopShow(true);
                }
            }           
            // makes slideshow finite
            if(!options.infiniteLoop){
                if(!isWorking){
                    var slideLoop = false;
                    // make current slide the old value plus moveSlideQty
                    currentSlide = (currentSlide + (options.moveSlideQty));
                    // if current slide has looped on itself
                    if(currentSlide <= lastSlide){
                        checkEndControls();
                        // next slide callback
                        options.onNextSlide(currentSlide, $children.length, $children.eq(currentSlide));
                        // move to appropriate slide
                        base.goToSlide(currentSlide);                       
                    }else{
                        currentSlide -= options.moveSlideQty;
                    }
                } // end if(!isWorking)     
            }else{ 
                if(!isWorking){
                    isWorking = true;                   
                    var slideLoop = false;
                    // make current slide the old value plus moveSlideQty
                    currentSlide = (currentSlide + options.moveSlideQty);
                    // if current slide has looped on itself
                    if(currentSlide > lastSlide){
                        currentSlide = currentSlide % $children.length;
                        slideLoop = true;
                    }
                    // next slide callback
                    options.onNextSlide(currentSlide, $children.length, $children.eq(currentSlide));
                    // slide before callback
                    options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide));
                    if(options.mode == 'horizontal'){                       
                        // get the new 'left' property for $parent
                        var parentLeft = (options.moveSlideQty * childrenOuterWidth);
                        // animate to the new 'left'
                        $parent.animate({'left': '-='+parentLeft+'px'}, options.speed, options.easing, function(){
                            isWorking = false;
                            // if its time to loop, reset the $parent
                            if(slideLoop){
                                $parent.css('left', '-'+getSlidePosition(currentSlide, 'left')+'px');
                            }
                            // perform the callback function
                            options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
                        });
                    }else if(options.mode == 'vertical'){
                        // get the new 'left' property for $parent
                        var parentTop = (options.moveSlideQty * childrenMaxHeight);
                        // animate to the new 'left'
                        $parent.animate({'top': '-='+parentTop+'px'}, options.speed, options.easing, function(){
                            isWorking = false;
                            // if its time to loop, reset the $parent
                            if(slideLoop){
                                $parent.css('top', '-'+getSlidePosition(currentSlide, 'top')+'px');
                            }
                            // perform the callback function
                            options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
                        });
                    }else if(options.mode == 'fade'){
                        setChildrenFade();
                    }                   
                    // make the current slide active
                    if(options.moveSlideQty > 1){
                        makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty));
                    }else{
                        makeSlideActive(currentSlide);
                    }
                    // display the caption
                    showCaptions();
                } // end if(!isWorking)

            }   
        } // end function

        /**
         * Go to previous slide
         */     
        this.goToPreviousSlide = function(stopAuto){
            // check if stopAuto argument is supplied
            if(typeof(stopAuto) == 'undefined'){
                if (typeof(options.stopAuto) != 'undefined')
                    {var stopAuto = options.stopAuto;}
                else
                    {var stopAuto = true;}
            }
            if(stopAuto){
                // if show is auto playing, stop it
                if(options.auto){
                    base.stopShow(true);
                }
            }           
            // makes slideshow finite
            if(!options.infiniteLoop){  
                if(!isWorking){
                    var slideLoop = false;
                    // make current slide the old value plus moveSlideQty
                    currentSlide = currentSlide - options.moveSlideQty;
                    // if current slide has looped on itself
                    if(currentSlide < 0){
                        currentSlide = 0;
                        // if specified, hide the control on the last slide
                        if(options.hideControlOnEnd){
                            $('.bx-prev', $outerWrapper).hide();
                        }
                    }
                    checkEndControls();
                    // next slide callback
                    options.onPrevSlide(currentSlide, $children.length, $children.eq(currentSlide));
                    // move to appropriate slide
                    base.goToSlide(currentSlide);
                }                           
            }else{
                if(!isWorking){
                    isWorking = true;           
                    var slideLoop = false;
                    // make current slide the old value plus moveSlideQty
                    currentSlide = (currentSlide - (options.moveSlideQty));
                    // if current slide has looped on itself
                    if(currentSlide < 0){
                        negativeOffset = (currentSlide % $children.length);
                        if(negativeOffset == 0){
                            currentSlide = 0;
                        }else{
                            currentSlide = ($children.length) + negativeOffset; 
                        }
                        slideLoop = true;
                    }
                    // next slide callback
                    options.onPrevSlide(currentSlide, $children.length, $children.eq(currentSlide));
                    // slide before callback
                    options.onBeforeSlide(currentSlide, $children.length, $children.eq(currentSlide));
                    if(options.mode == 'horizontal'){
                        // get the new 'left' property for $parent
                        var parentLeft = (options.moveSlideQty * childrenOuterWidth);
                        // animate to the new 'left'
                        $parent.animate({'left': '+='+parentLeft+'px'}, options.speed, options.easing, function(){
                            isWorking = false;
                            // if its time to loop, reset the $parent
                            if(slideLoop){
                                $parent.css('left', '-'+getSlidePosition(currentSlide, 'left')+'px');
                            }
                            // perform the callback function
                            options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
                        });
                    }else if(options.mode == 'vertical'){
                        // get the new 'left' property for $parent
                        var parentTop = (options.moveSlideQty * childrenMaxHeight);
                        // animate to the new 'left'
                        $parent.animate({'top': '+='+parentTop+'px'}, options.speed, options.easing, function(){
                            isWorking = false;
                            // if its time to loop, reset the $parent
                            if(slideLoop){
                                $parent.css('top', '-'+getSlidePosition(currentSlide, 'top')+'px');
                            }
                            // perform the callback function
                            options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
                        });
                    }else if(options.mode == 'fade'){
                        setChildrenFade();
                    }                   
                    // make the current slide active
                    if(options.moveSlideQty > 1){
                        makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty));
                    }else{
                        makeSlideActive(currentSlide);
                    }
                    // display the caption
                    showCaptions();
                } // end if(!isWorking)             
            }
        } // end function

        /**
         * Go to first slide
         */     
        this.goToFirstSlide = function(stopAuto){
            // check if stopAuto argument is supplied
            if(typeof(stopAuto) == 'undefined'){
                if (typeof(options.stopAuto) != 'undefined')
                    {var stopAuto = options.stopAuto;}
                else
                    {var stopAuto = true;}
            }
            base.goToSlide(firstSlide, stopAuto);
        }

        /**
         * Go to last slide
         */     
        this.goToLastSlide = function(){
            // check if stopAuto argument is supplied
            if(typeof(stopAuto) == 'undefined'){
                if (typeof(options.stopAuto) != 'undefined')
                    {var stopAuto = options.stopAuto;}
                else
                    {var stopAuto = true;}
            }
            base.goToSlide(lastSlide, stopAuto);
        }

        /**
         * Get the current slide
         */     
        this.getCurrentSlide = function(){
            return currentSlide;
        }

        /**
         * Get the total slide count
         */     
        this.getSlideCount = function(){
            return $children.length;
        }

        /**
         * Stop the slideshow
         */     
        this.stopShow = function(changeText){
            clearInterval(interval);
            // check if changeText argument is supplied
            if(typeof(changeText) == 'undefined'){
                var changeText = true;
            }
            if(changeText && options.autoControls){
                $autoControls.html($startContent).removeClass('stop').addClass('start');
                autoPlaying = false;
            }
        }

        /**
         * Start the slideshow
         */     
        this.startShow = function(changeText){
            // check if changeText argument is supplied
            if(typeof(changeText) == 'undefined'){
                var changeText = true;
            }
            setAutoInterval();
            if(changeText && options.autoControls){
                $autoControls.html($stopContent).removeClass('start').addClass('stop');
                autoPlaying = true;
            }
        }

        /**
         * Stops the ticker
         */     
        this.stopTicker = function(changeText){
            $parent.stop();
            // check if changeText argument is supplied
            if(typeof(changeText) == 'undefined'){
                var changeText = true;
            }
            if(changeText && options.ticker){
                $autoControls.html($startContent).removeClass('stop').addClass('start');
                autoPlaying = false;
            }           
        }

        /**
         * Starts the ticker
         */     
        this.startTicker = function(changeText){
            if(options.mode == 'horizontal'){
                if(options.tickerDirection == 'next'){
                    // get the 'left' property where the ticker stopped
                    var stoppedLeft = parseInt($parent.css('left'));
                    // calculate the remaining distance the show must travel until the loop
                    var remainingDistance = (origShowWidth + stoppedLeft) + $children.eq(0).width();            
                }else if(options.tickerDirection == 'prev'){
                    // get the 'left' property where the ticker stopped
                    var stoppedLeft = -parseInt($parent.css('left'));
                    // calculate the remaining distance the show must travel until the loop
                    var remainingDistance = (stoppedLeft) - $children.eq(0).width();
                }
                // calculate the speed ratio to seamlessly finish the loop
                var finishingSpeed = (remainingDistance * options.tickerSpeed) / origShowWidth;
                // call the show
                moveTheShow(tickerLeft, remainingDistance, finishingSpeed);                 
            }else if(options.mode == 'vertical'){
                if(options.tickerDirection == 'next'){
                    // get the 'top' property where the ticker stopped
                    var stoppedTop = parseInt($parent.css('top'));
                    // calculate the remaining distance the show must travel until the loop
                    var remainingDistance = (origShowHeight + stoppedTop) + $children.eq(0).height();           
                }else if(options.tickerDirection == 'prev'){
                    // get the 'left' property where the ticker stopped
                    var stoppedTop = -parseInt($parent.css('top'));
                    // calculate the remaining distance the show must travel until the loop
                    var remainingDistance = (stoppedTop) - $children.eq(0).height();
                }
                // calculate the speed ratio to seamlessly finish the loop
                var finishingSpeed = (remainingDistance * options.tickerSpeed) / origShowHeight;
                // call the show
                moveTheShow(tickerTop, remainingDistance, finishingSpeed);
                // check if changeText argument is supplied
                if(typeof(changeText) == 'undefined'){
                    var changeText = true;
                }
                if(changeText && options.ticker){
                    $autoControls.html($stopContent).removeClass('start').addClass('stop');
                    autoPlaying = true;
                }                       
            }
        }

        /**
         * Initialize a new slideshow
         */     
        this.initShow = function(){

            // reinitialize all variables
            // base = this;
            $parent = $(this);
            $origElement = $parent.clone();
            $children = $parent.children();
            $outerWrapper = '';
            $firstChild = $parent.children(':first');
            childrenWidth = $firstChild.width();
            childrenMaxWidth = 0;
            childrenOuterWidth = $firstChild.outerWidth();
            childrenMaxHeight = 0;
            wrapperWidth = getWrapperWidth();
            wrapperHeight = getWrapperHeight();
            isWorking = false;
            $pager = '';    
            currentSlide = 0;   
            origLeft = 0;
            origTop = 0;
            interval = '';
            $autoControls = '';
            $stopHtml = '';
            $startContent = '';
            $stopContent = '';
            autoPlaying = true;
            loaded = false;
            origShowWidth = 0;
            origShowHeight = 0;
            tickerLeft = 0;
            tickerTop = 0;

            firstSlide = 0;
            lastSlide = $children.length - 1;

            // get the largest child's height and width
            $children.each(function(index) {
              if($(this).outerHeight() > childrenMaxHeight){
                    childrenMaxHeight = $(this).outerHeight();
                }
                if($(this).outerWidth() > childrenMaxWidth){
                    childrenMaxWidth = $(this).outerWidth();
                }
            });

            // get random slide number
            if(options.randomStart){
                var randomNumber = Math.floor(Math.random() * $children.length);
                currentSlide = randomNumber;
                origLeft = childrenOuterWidth * (options.moveSlideQty + randomNumber);
                origTop = childrenMaxHeight * (options.moveSlideQty + randomNumber);
            // start show at specific slide
            }else{
                currentSlide = options.startingSlide;
                origLeft = childrenOuterWidth * (options.moveSlideQty + options.startingSlide);
                origTop = childrenMaxHeight * (options.moveSlideQty + options.startingSlide);
            }

            // set initial css
            initCss();

            // check to show pager
            if(options.pager && !options.ticker){
                if(options.pagerType == 'full'){
                    showPager('full');
                }else if(options.pagerType == 'short'){
                    showPager('short');
                }
            }

            // check to show controls
            if(options.controls && !options.ticker){
                setControlsVars();
            }

            // check if auto
            if(options.auto || options.ticker){
                // check if auto controls are displayed
                if(options.autoControls){
                    setAutoControlsVars();
                }
                // check if show should auto start
                if(options.autoStart){
                    // check if autostart should delay
                    setTimeout(function(){
                        base.startShow(true);
                    }, options.autoDelay);
                }else{
                    base.stopShow(true);
                }
                // check if show should pause on hover
                if(options.autoHover && !options.ticker){
                    setAutoHover();
                }
            }                       
            // make the starting slide active
            if(options.moveSlideQty > 1){
                makeSlideActive(Math.ceil(currentSlide / options.moveSlideQty));
            }else{          
                makeSlideActive(currentSlide);          
            }
            // check for finite show and if controls should be hidden
            checkEndControls();
            // show captions
            if(options.captions){
                showCaptions();
            }
            // perform the callback function
            options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
        }

        /**
         * Destroy the current slideshow
         */     
        this.destroyShow = function(){          
            // stop the auto show
            clearInterval(interval);
            // remove any controls / pagers that have been appended
            $('.bx-next, .bx-prev, .bx-pager, .bx-auto', $outerWrapper).remove();
            // unwrap all bx-wrappers
            $parent.unwrap().unwrap().removeAttr('style');
            // remove any styles that were appended
            $parent.children().removeAttr('style').not('.pager').remove();
            // remove any childrent that were appended
            $children.removeClass('pager');

        }

        /**
         * Reload the current slideshow
         */     
        this.reloadShow = function(){
            base.destroyShow();
            base.initShow();
        }

        // PRIVATE FUNCTIONS

        /**
         * Creates all neccessary styling for the slideshow
         */     
        function initCss(){
            // layout the children
            setChildrenLayout(options.startingSlide);
            // CSS for horizontal mode
            if(options.mode == 'horizontal'){
                // wrap the <ul> in div that acts as a window and make the <ul> uber wide
                $parent
                .wrap('<div class="'+options.wrapperClass+'" style="width:'+wrapperWidth+'px; position:relative;"></div>')
                .wrap('<div class="bx-window" style="position:relative; overflow:hidden; width:'+wrapperWidth+'px;"></div>')
                .css({
                  width: '999999px',
                  position: 'relative',
                    left: '-'+(origLeft)+'px'
                });
                $parent.children().css({
                    width: childrenWidth,
                  'float': 'left',
                  listStyle: 'none'
                });                 
                $outerWrapper = $parent.parent().parent();
                $children.addClass('pager');
            // CSS for vertical mode
            }else if(options.mode == 'vertical'){
                // wrap the <ul> in div that acts as a window and make the <ul> uber tall
                $parent
                .wrap('<div class="'+options.wrapperClass+'" style="width:'+childrenMaxWidth+'px; position:relative;"></div>')
                .wrap('<div class="bx-window" style="width:'+childrenMaxWidth+'px; height:'+wrapperHeight+'px; position:relative; overflow:hidden;"></div>')
                .css({
                  height: '999999px',
                  position: 'relative',
                    top: '-'+(origTop)+'px'
                });
                $parent.children().css({
                  listStyle: 'none',
                    height: childrenMaxHeight
                });                 
                $outerWrapper = $parent.parent().parent();
                $children.addClass('pager');
            // CSS for fade mode
            }else if(options.mode == 'fade'){
                // wrap the <ul> in div that acts as a window
                $parent
                .wrap('<div class="'+options.wrapperClass+'" style="width:'+childrenMaxWidth+'px; position:relative;"></div>')
                .wrap('<div class="bx-window" style="height:'+childrenMaxHeight+'px; width:'+childrenMaxWidth+'px; position:relative; overflow:hidden;"></div>');
                $parent.children().css({
                  listStyle: 'none',
                  position: 'absolute',
                    top: 0,
                    left: 0,
                    zIndex: 98
                });                 
                $outerWrapper = $parent.parent().parent();
                $children.not(':eq('+currentSlide+')').fadeTo(0, 0);
                $children.eq(currentSlide).css('zIndex', 99);
            }
            // if captions = true setup a div placeholder
            if(options.captions && options.captionsSelector == null){
                $outerWrapper.append('<div class="bx-captions"></div>');
            }           
        }

        /**
         * Depending on mode, lays out children in the proper setup
         */     
        function setChildrenLayout(){           
            // lays out children for horizontal or vertical modes
            if(options.mode == 'horizontal' || options.mode == 'vertical'){

                // get the children behind
                var $prependedChildren = getArraySample($children, 0, options.moveSlideQty, 'backward');

                // add each prepended child to the back of the original element
                $.each($prependedChildren, function(index) {
                    $parent.prepend($(this));
                });         

                // total number of slides to be hidden after the window
                var totalNumberAfterWindow = ($children.length + options.moveSlideQty) - 1;
                // number of original slides hidden after the window
                var pagerExcess = $children.length - options.displaySlideQty;
                // number of slides to append to the original hidden slides
                var numberToAppend = totalNumberAfterWindow - pagerExcess;
                // get the sample of extra slides to append
                var $appendedChildren = getArraySample($children, 0, numberToAppend, 'forward');

                if(options.infiniteLoop){
                    // add each appended child to the front of the original element
                    $.each($appendedChildren, function(index) {
                        $parent.append($(this));
                    });
                }
            }
        }

        /**
         * Sets all variables associated with the controls
         */     
        function setControlsVars(){
            // check if text or images should be used for controls
            // check "next"
            if(options.nextImage != ''){
                nextContent = options.nextImage;
                nextType = 'image';
            }else{
                nextContent = options.nextText;
                nextType = 'text';
            }
            // check "prev"
            if(options.prevImage != ''){
                prevContent = options.prevImage;
                prevType = 'image';
            }else{
                prevContent = options.prevText;
                prevType = 'text';
            }
            // show the controls
            showControls(nextType, nextContent, prevType, prevContent);
        }           

        /**
         * Puts slideshow into auto mode
         *
         * @param int pause number of ms the slideshow will wait between slides 
         * @param string direction 'forward', 'backward' sets the direction of the slideshow (forward/backward)
         * @param bool controls determines if start/stop controls will be displayed
         */     
        function setAutoInterval(){
            if(options.auto){
                // finite loop
                if(!options.infiniteLoop){
                    if(options.autoDirection == 'next'){
                        interval = setInterval(function(){
                            currentSlide += options.moveSlideQty;
                            // if currentSlide has exceeded total number
                            if(currentSlide > lastSlide){
                                currentSlide = currentSlide % $children.length;
                            }
                            base.goToSlide(currentSlide, false);
                        }, options.pause);
                    }else if(options.autoDirection == 'prev'){
                        interval = setInterval(function(){
                            currentSlide -= options.moveSlideQty;
                            // if currentSlide is smaller than zero
                            if(currentSlide < 0){
                                negativeOffset = (currentSlide % $children.length);
                                if(negativeOffset == 0){
                                    currentSlide = 0;
                                }else{
                                    currentSlide = ($children.length) + negativeOffset; 
                                }
                            }
                            base.goToSlide(currentSlide, false);
                        }, options.pause);
                    }
                // infinite loop
                }else{
                    if(options.autoDirection == 'next'){
                        interval = setInterval(function(){
                            base.goToNextSlide(false);
                        }, options.pause);
                    }else if(options.autoDirection == 'prev'){
                        interval = setInterval(function(){
                            base.goToPreviousSlide(false);
                        }, options.pause);
                    }
                }

            }else if(options.ticker){

                options.tickerSpeed *= 10;

                // get the total width of the original show
                $('.pager', $outerWrapper).each(function(index) {
                  origShowWidth += $(this).width();
                    origShowHeight += $(this).height();
                });

                // if prev start the show from the last slide
                if(options.tickerDirection == 'prev' && options.mode == 'horizontal'){
                    $parent.css('left', '-'+(origShowWidth+origLeft)+'px');
                }else if(options.tickerDirection == 'prev' && options.mode == 'vertical'){
                    $parent.css('top', '-'+(origShowHeight+origTop)+'px');
                }

                if(options.mode == 'horizontal'){
                    // get the starting left position
                    tickerLeft = parseInt($parent.css('left'));
                    // start the ticker
                    moveTheShow(tickerLeft, origShowWidth, options.tickerSpeed);
                }else if(options.mode == 'vertical'){
                    // get the starting top position
                    tickerTop = parseInt($parent.css('top'));
                    // start the ticker
                    moveTheShow(tickerTop, origShowHeight, options.tickerSpeed);
                }                                               

                // check it tickerHover applies
                if(options.tickerHover){
                    setTickerHover();
                }                   
            }           
        }

        function moveTheShow(leftCss, distance, speed){
            // if horizontal
            if(options.mode == 'horizontal'){
                // if next
                if(options.tickerDirection == 'next'){
                    $parent.animate({'left': '-='+distance+'px'}, speed, 'linear', function(){
                        $parent.css('left', leftCss);
                        moveTheShow(leftCss, origShowWidth, options.tickerSpeed);
                    });
                // if prev
                }else if(options.tickerDirection == 'prev'){
                    $parent.animate({'left': '+='+distance+'px'}, speed, 'linear', function(){
                        $parent.css('left', leftCss);
                        moveTheShow(leftCss, origShowWidth, options.tickerSpeed);
                    });
                }
            // if vertical      
            }else if(options.mode == 'vertical'){
                // if next
                if(options.tickerDirection == 'next'){
                    $parent.animate({'top': '-='+distance+'px'}, speed, 'linear', function(){
                        $parent.css('top', leftCss);
                        moveTheShow(leftCss, origShowHeight, options.tickerSpeed);
                    });
                // if prev
                }else if(options.tickerDirection == 'prev'){
                    $parent.animate({'top': '+='+distance+'px'}, speed, 'linear', function(){
                        $parent.css('top', leftCss);
                        moveTheShow(leftCss, origShowHeight, options.tickerSpeed);
                    });
                }
            }
        }       

        /**
         * Sets all variables associated with the controls
         */     
        function setAutoControlsVars(){
            // check if text or images should be used for controls
            // check "start"
            if(options.startImage != ''){
                startContent = options.startImage;
                startType = 'image';
            }else{
                startContent = options.startText;
                startType = 'text';
            }
            // check "stop"
            if(options.stopImage != ''){
                stopContent = options.stopImage;
                stopType = 'image';
            }else{
                stopContent = options.stopText;
                stopType = 'text';
            }
            // show the controls
            showAutoControls(startType, startContent, stopType, stopContent);
        }

        /**
         * Handles hover events for auto shows
         */     
        function setAutoHover(){
            // hover over the slider window
            $outerWrapper.find('.bx-window').hover(function() {
                if(autoPlaying){
                    base.stopShow(false);
                }
            }, function() {
                if(autoPlaying){
                    base.startShow(false);
                }
            });
        }

        /**
         * Handles hover events for ticker mode
         */     
        function setTickerHover(){
            // on hover stop the animation
            $parent.hover(function() {
                if(autoPlaying){
                    base.stopTicker(false);
                }
            }, function() {
                if(autoPlaying){
                    base.startTicker(false);
                }
            });
        }       

        /**
         * Handles fade animation
         */     
        function setChildrenFade(){
            // fade out any other child besides the current
            $children.not(':eq('+currentSlide+')').fadeTo(options.speed, 0).css('zIndex', 98);
            // fade in the current slide
            $children.eq(currentSlide).css('zIndex', 99).fadeTo(options.speed, 1, function(){
                isWorking = false;
                // ie fade fix
                if(jQuery.browser.msie){
                    $children.eq(currentSlide).get(0).style.removeAttribute('filter');
                }
                // perform the callback function
                options.onAfterSlide(currentSlide, $children.length, $children.eq(currentSlide));
            });
        };

        /**
         * Makes slide active
         */     
        function makeSlideActive(number){
            if(options.pagerType == 'full' && options.pager){
                // remove all active classes
                $('a', $pager).removeClass(options.pagerActiveClass);
                // assign active class to appropriate slide
                $('a', $pager).eq(number).addClass(options.pagerActiveClass);
            }else if(options.pagerType == 'short' && options.pager){
                $('.bx-pager-current', $pager).html(currentSlide+1);
            }
        }

        /**
         * Displays next/prev controls
         *
         * @param string nextType 'image', 'text'
         * @param string nextContent if type='image', specify a filepath to the image. if type='text', specify text.
         * @param string prevType 'image', 'text'
         * @param string prevContent if type='image', specify a filepath to the image. if type='text', specify text.
         */     
        function showControls(nextType, nextContent, prevType, prevContent){
            // create pager html elements
            var $nextHtml = $('<a href="#" class="bx-next"></a>');
            var $prevHtml = $('<a href="#" class="bx-prev"></a>');
            // check if next is 'text' or 'image'
            if(nextType == 'text'){
                $nextHtml.html(nextContent);
            }else{
                $nextHtml.html('<img src="'+nextContent+'" />');
            }
            // check if prev is 'text' or 'image'
            if(prevType == 'text'){
                $prevHtml.html(prevContent);
            }else{
                $prevHtml.html('<img src="'+prevContent+'" />');
            }
            // check if user supplied a selector to populate next control
            if(options.prevSelector){
                $(options.prevSelector).append($prevHtml);
            }else{
                $outerWrapper.append($prevHtml);
            }
            // check if user supplied a selector to populate next control
            if(options.nextSelector){
                $(options.nextSelector).append($nextHtml);
            }else{
                $outerWrapper.append($nextHtml);
            }
            // click next control
            $nextHtml.click(function() {
                base.goToNextSlide();
                return false;
            });
            // click prev control
            $prevHtml.click(function() {
                base.goToPreviousSlide();
                return false;
            });
        }

        /**
         * Displays the pager
         *
         * @param string type 'full', 'short'
         */     
        function showPager(type){
            // sets up logic for finite multi slide shows
            var pagerQty = $children.length;
            // if we are moving more than one at a time and we have a finite loop
            if(options.moveSlideQty > 1){
                // if slides create an odd number of pages
                if($children.length % options.moveSlideQty != 0){
                    // pagerQty = $children.length / options.moveSlideQty + 1;
                    pagerQty = Math.ceil($children.length / options.moveSlideQty);
                // if slides create an even number of pages
                }else{
                    pagerQty = $children.length / options.moveSlideQty;
                }
            }
            var pagerString = '';
            // check if custom build function was supplied
            if(options.buildPager){
                for(var i=0; i<pagerQty; i++){
                    pagerString += options.buildPager(i, $children.eq(i * options.moveSlideQty));
                }

            // if not, use default pager
            }else if(type == 'full'){
                // build the full pager
                for(var i=1; i<=pagerQty; i++){
                    pagerString += '<a href="" class="pager-link pager-'+i+'">'+i+'</a>';
                }
            }else if(type == 'short') {
                // build the short pager
                pagerString = '<span class="bx-pager-current">'+(options.startingSlide+1)+'</span> '+options.pagerShortSeparator+' <span class="bx-pager-total">'+$children.length+'</span>';
            }   
            // check if user supplied a pager selector
            if(options.pagerSelector){
                $(options.pagerSelector).append(pagerString);
                $pager = $(options.pagerSelector);
            }else{
                var $pagerContainer = $('<div class="bx-pager"></div>');
                $pagerContainer.append(pagerString);
                // attach the pager to the DOM
                if(options.pagerLocation == 'top'){
                    $outerWrapper.prepend($pagerContainer);
                }else if(options.pagerLocation == 'bottom'){
                    $outerWrapper.append($pagerContainer);
                }
                // cache the pager element
                $pager = $('.bx-pager', $outerWrapper);
            }
            $pager.children().click(function() {
                // only if pager is full mode
                if(options.pagerType == 'full'){
                    // get the index from the link
                    var slideIndex = $pager.children().index(this);
                    // accomodate moving more than one slide
                    if(options.moveSlideQty > 1){
                        slideIndex *= options.moveSlideQty;
                    }
                    base.goToSlide(slideIndex);
                }
                return false;
            });
        }

        /**
         * Displays captions
         */     
        function showCaptions(){
            // get the title from each image
          var caption = $('img', $children.eq(currentSlide)).attr('title');
            // if the caption exists
            if(caption != ''){
                // if user supplied a selector
                if(options.captionsSelector){
                    $(options.captionsSelector).html(caption);
                }else{
                    $('.bx-captions', $outerWrapper).html(caption);
                }
            }else{
                // if user supplied a selector
                if(options.captionsSelector){
                    $(options.captionsSelector).html('&nbsp;');
                }else{
                    $('.bx-captions', $outerWrapper).html('&nbsp;');
                }               
            }
        }

        /**
         * Displays start/stop controls for auto and ticker mode
         *
         * @param string type 'image', 'text'
         * @param string next [optional] if type='image', specify a filepath to the image. if type='text', specify text.
         * @param string prev [optional] if type='image', specify a filepath to the image. if type='text', specify text.
         */
        function showAutoControls(startType, startContent, stopType, stopContent){
            // create pager html elements
            $autoControls = $('<a href="" class="bx-start"></a>');
            // check if start is 'text' or 'image'
            if(startType == 'text'){
                $startContent = startContent;
            }else{
                $startContent = '<img src="'+startContent+'" />';
            }
            // check if stop is 'text' or 'image'
            if(stopType == 'text'){
                $stopContent = stopContent;
            }else{
                $stopContent = '<img src="'+stopContent+'" />';
            }
            // check if user supplied a selector to populate next control
            if(options.autoControlsSelector){
                $(options.autoControlsSelector).append($autoControls);
            }else{
                $outerWrapper.append('<div class="bx-auto"></div>');
                $('.bx-auto', $outerWrapper).html($autoControls);
            }

            // click start control
            $autoControls.click(function() {
                if(options.ticker){
                    if($(this).hasClass('stop')){
                        base.stopTicker();
                    }else if($(this).hasClass('start')){
                        base.startTicker();
                    }
                }else{
                    if($(this).hasClass('stop')){
                        base.stopShow(true);
                    }else if($(this).hasClass('start')){
                        base.startShow(true);
                    }
                }
                return false;
            });

        }

        /**
         * Checks if show is in finite mode, and if slide is either first or last, then hides the respective control
         */     
        function checkEndControls(){
            if(!options.infiniteLoop && options.hideControlOnEnd){
                // check previous
                if(currentSlide == firstSlide){
                    $('.bx-prev', $outerWrapper).hide();                
                }else{
                    $('.bx-prev', $outerWrapper).show();
                }
                // check next
                if(currentSlide == lastSlide){
                    $('.bx-next', $outerWrapper).hide();
                }else{
                    $('.bx-next', $outerWrapper).show();
                }
            }
        }

        /**
         * Returns the left offset of the slide from the parent container
         */     
        function getSlidePosition(number, side){            
            if(side == 'left'){
                var position = $('.pager', $outerWrapper).eq(number).position().left;
            }else if(side == 'top'){
                var position = $('.pager', $outerWrapper).eq(number).position().top;
            }
            return position;
        }

        /**
         * Returns the width of the wrapper
         */     
        function getWrapperWidth(){
            var wrapperWidth = $firstChild.outerWidth() * options.displaySlideQty;
            return wrapperWidth;
        }

        /**
         * Returns the height of the wrapper
         */     
        function getWrapperHeight(){
            // if displaying multiple slides, multiple wrapper width by number of slides to display
            var wrapperHeight = $firstChild.outerHeight() * options.displaySlideQty;
            return wrapperHeight;
        }

        /**
         * Returns a sample of an arry and loops back on itself if the end of the array is reached
         *
         * @param array array original array the sample is derived from
         * @param int start array index sample will start
         * @param int length number of items in the sample
         * @param string direction 'forward', 'backward' direction the loop should travel in the array
         */     
        function getArraySample(array, start, length, direction){
            // initialize empty array
            var sample = [];
            // clone the length argument
            var loopLength = length;
            // determines when the empty array should start being populated
            var startPopulatingArray = false;
            // reverse the array if direction = 'backward'
            if(direction == 'backward'){
                array = $.makeArray(array);
                array.reverse();
            }
            // loop through original array until the length argument is met
            while(loopLength > 0){              
                // loop through original array
                $.each(array, function(index, val) {
                    // check if length has been met
                    if(loopLength > 0){
                        // don't do anything unless first index has been reached
                      if(!startPopulatingArray){
                            // start populating empty array
                            if(index == start){
                                startPopulatingArray = true;
                                // add element to array
                                sample.push($(this).clone());
                                // decrease the length clone variable
                                loopLength--;
                            }
                        }else{
                            // add element to array
                            sample.push($(this).clone());
                            // decrease the length clone variable
                            loopLength--;
                        }
                    // if length has been met, break loose
                    }else{
                        return false;
                    }           
                });             
            }
            return sample;
        }

        this.each(function(){
            // make sure the element has children
            if($(this).children().length > 0){
                base.initShow();
            }
        });

        return this;                        
    }

    jQuery.fx.prototype.cur = function(){
        if ( this.elem[this.prop] != null && (!this.elem.style || this.elem.style[this.prop] == null) ) {
            return this.elem[ this.prop ];
        }

        var r = parseFloat( jQuery.css( this.elem, this.prop ) );
        // return r && r > -10000 ? r : 0;
        return r;
    }

})(jQuery);

It can be 'minified' and using Javascrip Minifier

[Oikio]

I just use this code:

$('.bx-pager a, .prev a, .next a').click(function (){ slider.stopShow(), slider.startShow() });

stopShow() is to prevent slider to create several time intervals when you fastly click on controls many times.

[robwilkerson]

It seems to me that the problem stems from the fact that no stopAuto value is being passed into the goTo(Next|Previous)Slide() functions when they're called in setAutoInterval(). To fix, I changed the call to:

base.goToNextSlide( !options.infiniteLoop );

If the infiniteLoop value is true, the stopAuto value will be false and vice versa. So far, that seems to fix the problem for me.

[mcpmbstu]

I am happy that you share the RAW file..because i faced the IE7 Error prob for bxSlider.js file. If anyone face same prob that plugin not work then please copy this RAW JS file you can see then the Magin....thanks for your great effort for the Get the next current slider active-page.

[jonwallacedesign]

Has anyone got a fix for this for v4.1 ???

[rodeghiero]

Sorry my english!

In "jquery.bxslider.js" search by "var defaults = {" and insert item:

"stopAuto: true,"

Search function "el.stopAuto = function(preventControlUpdate){" and insert after "slider.interval = null;" this code:

if( slider.settings.stopAuto == false ){ setTimeout(function(){ el.startAuto(); }, slider.settings.pause); }

In your script set stopAuto: false, example: $('.bxslider').bxSlider({ auto: true, pause: 1000, stopAuto: false, mode: 'fade', });

Implementing for version BxSlider v4.1.1 Att

[3R-soft]

Good job rodeghiero! I just threw out the following code line: , slider.settings.pause because it appeared double pause and a loss of continuity. Sorry on my English, too. :)

[ihhaman]

Rodeghiero method gives some issue with autoHover: true feature enable: slider dont stops on hover on.

So, you may use Oikio solution: it is short and simple. For current version you need write something like this:

$(document).on('click','.bx-next, .bx-prev',function() {
    slider.stopAuto();
    slider.startAuto();
});

[DooMdf]

Thank you! ihhaman, I used your code, but had to edit it:

$(document).click('.bx-next, .bx-prev',function() {
    slider.stopAuto();
    slider.startAuto();
});

line:

    slider.stopAuto();

is not required because when user press on next/prev bxslider get paused, if controls are visible you can see that it set itself to pause.

I don't know JS but this works for me so I am very happy! Can someone help create counter that will show number of current slide from total slides number? ex: 2/14

[Aladdin-Ark]

In my case I didn't use all the functionality of the bxslider, therefor I have did some modification on the bxslider.js

open bxslider.js and comment this line "if (slider.settings.auto) el.stopAuto();" in all of "clickPagerBind", "clickNextBind", and "clickPrevBind".

[Aladdin-Ark]

DooMdf you asked about counter to show the number of the current slide simply you can add "pagerType: 'short'," to the slider option.

For example: jQuery(document).ready(function($){ $('.highlightSlider').bxSlider({ auto: true, pager: true, pagerType: 'short', controls: false, pause: 5000, autoControls: true
});

The result will be something like that:

[DooMdf]

A-Gaber Thank you for the info, but I did it like this:

    var cntext=''; // get total feeds (slides) number

    $(document).ready(function(){
        var count = slider.getSlideCount();
        cntext = '/'+count;
        document.getElementById("counter").innerHTML=cntext;
        document.getElementById("counter").innerHTML=slider.getCurrentSlide()+1 + cntext;
        return false;
    });

    $(document).click('#prevFeedBtn, #nextFeedBtn',function() {
       // slider.stopAuto();
        slider.startAuto();
        document.getElementById("counter").innerHTML=slider.getCurrentSlide()+1 + cntext;
    });

    var slider = $('.bxslider').bxSlider({
        mode: 'vertical',
        slideMargin: 10,
        captions: false,
        randomStart: true,
        pager: false,
        auto: true,
        stopAuto: true,
        autoHover:true,
        controls:true,
        speed: 1000,
        adaptiveHeight:true,
        pause: 4000,
        nextSelector: '#slider-next',
        prevSelector: '#slider-prev',
        nextText: '<?php echo "<span class=\"nextFeedBtn\" title=\"Scroll to next feed\"></span>";?>',
        prevText: '<?php echo "<span class=\"prevFeedBtn\" title=\"Scroll to previous feed\"></span>";?>',
        onSlideBefore: function () {
            document.getElementById("counter").innerHTML=slider.getCurrentSlide()+1 + cntext;
        }

    });

I think it not very good script but it works for me and it took me like 4 hours to make it work :\

[mcpmbstu]

thanks "rodeghiero" you solve my v4.1 bxslider issue....thanks a lot

[moabi]

HI, I did it that way for the pager :

    $('.bx-pager-item a').click(function(e){
        var i = $(this).index();
        slider.goToSlide(i);
        slider.stopAuto();
        restart=setTimeout(function(){
            slider.startAuto();
            },500);

        return false;
    });

[dubbsdubblin]

Lots of requests for this - could it be made into the base build with a boolean to select if you want it as true or false as a slider option?

[IsacCosta]

open the file - jquery.bxslider.min.js

find the function and comment on internal controls

r.stopAuto = function (t) {

//o.interval && (clearInterval (o.interval), o.interval = null && o.settings.autoControls // 1! // && t = A ("start"))   }

[lsag]

@rodeghiero it worked very well. Thanks!

[balasuresha]

controls in bxslider is not working when ticker:true

[caioverissimo]

I did it like this way for BxSlider v4.1.2:

$(document).ready(function(){ var slider = $('.bxslider').bxSlider({ adaptiveHeight: true, auto: true, stopAuto: false, mode: 'fade', });

$('.bx-pager-item a').click(function(e){
    var i = $(this).attr("data-slide-index");
    slider.goToSlide(i);
    slider.stopAuto();
    restart=setTimeout(function(){
        slider.startAuto();
    },500);
    return false;
});

});

[ThaiNoon]

How do I make both Slide Index and Pager to appear in the "bx-pager bx-custom-pager" box? When I change PagerType: 'short', the index thumbnails disappear. Thank you in advance for your help.