CODEWITHSUNDEEP
javascriptjquerybxslider
Arerrac
Arerrac

Reputation: 419

BxSlider: "next" on last slide -> Jump back to first slide?

I would like to use a different version of the infinite carousel and scroll back to the first slide (instead of cloning the last and first slide and only go in one direction).

Background is: I would like to have a infinite loop but I'm using IDs within the slides, that aren't allowed to be cloned.

Here's a demo of the BxSlider working with clones: http://bxslider.com/examples/auto-show-start-stop-controls

Thanks!

Upvotes: 0

Views: 5461

Answers (1)

Arerrac
Arerrac

Reputation: 419

Sorry for the missing code. Here's how you can get the BxSlider to be infinite without cloning items but instead jumping back to first/last slide:

var slider = $('.bxslider').bxSlider({,
   infiniteLoop: false,
   hideControlOnEnd: false,
   startSlide: 0
});

Here's the (simple) magic:

$(".bx-controls-direction").on( "click", ".bx-prev.disabled", function() {
    var slideQty = slider.getSlideCount();
    slider.goToSlide(slideQty-1);
});

$(".bx-controls-direction").on( "click", ".bx-next.disabled", function() {
    slider.goToSlide(0);
});

Upvotes: 4

Related Questions