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

Question

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?

I tried it with var slider =$('.bxslider').bxSlider({...}); first but I think there was an error when I called slider.startAuto(). But I'm not sure anymore... — user2718671, Dec 16 '13 at 14:17

score 20 · Accepted Answer · edited Jun 08 '18 at 19:29

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.

thx! That was a big help! But it doesn't work with your i variable. Has to be: var i = $(this).attr("data-slide-index"); ;) — user2718671, Jan 08 '14 at 15:06

score 8 · Answer 2 · answered Jun 16 '15 at 14:20

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

score 3 · Answer 3 · edited Jun 08 '18 at 19:32

3

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

edited Jun 08 '18 at 19:32

Ganesh Yadav

2,299
2
23
50

answered Dec 16 '14 at 08:08

doige

31
1

score 2 · Answer 4 · answered Jan 24 '14 at 13:12

2

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

answered Jan 24 '14 at 13:12

KOMENIX

21
2

Thx! Didn't try it yet but looks logical to me :) – user2718671 Jan 24 '14 at 13:14
Not only that row but also the other 2 occurrences of that line. Practically you can search for the comment : `// if auto show is running, stop it` to find them. – wooer Apr 13 '14 at 12:03

score 1 · Answer 5 · answered Jan 19 '15 at 13:24

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

score 1 · Answer 6 · edited Jun 08 '18 at 19:29

1

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

edited Jun 08 '18 at 19:29

Ganesh Yadav

2,299
2
23
50

answered Oct 10 '15 at 02:39

Bala

342
1
9
25

1

Although I don't like modifying the libraries core files itself, your solution is the only solution worked for me! – خالد محمود Oct 13 '15 at 10:53
1

@Khaled Mahmoud I tried everything all over Internet and I found this somewhere else, this need to be fixed in next version. – Bala Oct 14 '15 at 05:25

score 0 · Answer 7 · answered Apr 30 '14 at 20:48

0

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

answered Apr 30 '14 at 20:48

JSNYC User

1

score 0 · Answer 8 · edited Jul 09 '14 at 07:55

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>

score 0 · Answer 9 · answered Aug 28 '14 at 08:28

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.

score -1 · Answer 10 · edited Aug 28 '14 at 16:48

-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"))
 },

edited Aug 28 '14 at 16:48

mskfisher

3,028
3
31
47

answered Aug 28 '14 at 16:40

isac costa

1
1

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

10 Answers10

Linked