CODEWITHSUNDEEP
jquerynavigationbxslider
user2718671
user2718671

Reputation: 2976

bx slider: How to continue auto sliding after clicking in default bx pager?

I want to continue the autosliding after clicking on a bx pager item.

Here's the code:

$(document).ready(function () {
    $('.bxslider').bxSlider({
        mode: 'horizontal', //mode: 'fade',            
        speed: 500,
        auto: true,
        infiniteLoop: true,
        hideControlOnEnd: true,
        useCSS: false
    });

    $(".bx-pager-link").click(function () {
        console.log('bla');            
        slider = $('.bxslider').bxSlider();
        slider.stopAuto();
        slider.startAuto();
        //slider.stopShow();
        //slider.startShow();
    });
});

The uncommented stopShow() and startShow() function doesn't work at all. startAuto() continues the slideshow but the bx pager navigation is frozen. The active dot stays active even if new slide appears. How to solve that?

Upvotes: 14

Views: 44714

Answers (10)

doige
doige

Reputation: 31

This works for me:

var slider = $('.bxslider').bxSlider({
    auto: true,
    controls: false,
    onSliderLoad: function () {
        $('.bx-pager-link').click(function () {
            var i = $(this).data('slide-index');
            slider.goToSlide(i);
            slider.stopAuto();
            slider.startAuto();
            return false;
        });
    }
});

Upvotes: 3

Jawaad
Jawaad

Reputation: 496

You can try it like this:

$(document).ready(function () {
    var slider = $('.bxslider').bxSlider({
        mode: 'horizontal', //mode: 'fade',            
        speed: 500,
        auto: true,
        infiniteLoop: true,
        hideControlOnEnd: true,
        useCSS: false
    });

    $(".bx-pager-link").click(function () {
        console.log('bla');            
        slider.stopAuto();
        slider.startAuto();
    });
});

Or you can use this:

$(document).ready(function () {
    var slider = $('.bxslider').bxSlider({
        mode: 'horizontal', //mode: 'fade',            
        speed: 500,
        auto: true,
        infiniteLoop: true,
        hideControlOnEnd: true,
        useCSS: false
    });

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

        return false;
    });
});

The second is works for me.

Upvotes: 20

Bala
Bala

Reputation: 362

I tried all the solutions above, but no luck and I'm using the latest version 4.1.2

In Jquery.bxslider.js add "el.startAuto();"

/**
 * Click next binding
 *
 * @param e (event)
 *  - DOM event object
 */
var clickNextBind = function(e){
    // if auto show is running, stop it
    if (slider.settings.auto) el.stopAuto(); 
    el.goToNextSlide();
    e.preventDefault();
     el.startAuto();
}

/**
 * Click prev binding
 *
 * @param e (event)
 *  - DOM event object
 */
var clickPrevBind = function(e){
    // if auto show is running, stop it
    if (slider.settings.auto) el.stopAuto();
    el.goToPrevSlide();
    e.preventDefault();
     el.startAuto();
}

Upvotes: 1

Vipul Jethva
Vipul Jethva

Reputation: 675

Following code working fine in site. Please try it :

var slider = $('.bxslider').bxSlider({
    auto: true,
    pager: false,
    autoHover: true,
    autoControls: true,
    onSlideAfter: function() {
        slider.stopAuto();
        slider.startAuto();
    }
});

Upvotes: 8

sandino
sandino

Reputation: 3842

For improving the answer, this worked for me on both mobile when you click if you are in a browser or if you swipe when you are on the phone, is clean, short and simple:

var slider = $('.slider');
    slider.bxSlider({
        auto: true,
        autoControls: true,
        onSlideAfter: function() {
            slider.startAuto()
        }
    });

Upvotes: 1

isac costa
isac costa

Reputation: 1

In jquery.bxslider.min.js, search for and hide 

r.stopAuto= function(t) {

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

Upvotes: -1

Starkadh
Starkadh

Reputation: 1

This code :

var slider = $('.bxslider').bxSlider();

$('.bx-pager-link').click(function () {
    var i = $(this).attr('data-slide-index');
    slider.goToSlide(i);
    slider.stopAuto();
    slider.startAuto();
    return false;
});

Works perfectly for me.

Upvotes: 0

sushilyogi
sushilyogi

Reputation: 41

this is working good ..

<script type="text/javascript">
  jQuery(document).ready(function(){

        jQuery('.bxslider').bxSlider({
         video: true,
          useCSS: false,
          });

           $(".bx-controls-direction").click(function () {
            console.log('bla');            
            slider = $('.bxslider').bxSlider();
            slider.stopVideo();
            slider.startVideo();
            //slider.stopShow();
            //slider.startShow();
        });

});
</script>

Upvotes: 0

JSNYC User
JSNYC User

Reputation: 1

Instead of using:

$('.bx-pager-item a').click(function(e){
    //blah
});

set the click function to point directly to the bx-prev and bx-next. This one works better for me.

$('.bx-prev, .bx-next').click(function(e){
    //blah
});

Upvotes: 0

KOMENIX
KOMENIX

Reputation: 21

var clickNextBind = function(e){
            // if auto show is running, stop it
            if (slider.settings.auto) el.stopAuto(); **<--- You must Delete this row.**
            el.goToNextSlide();
            e.preventDefault();
        }

Upvotes: 2

Related Questions