Owl Carousel 2 beta , jump to a specific slide

Question

I have implemented the Owl Carousel 2 in my website , I want to be able to jump to specific slide by using the Jumbpto helper provided like so ,

$('.btnJump').click(function(){
    $('#myCarousel').trigger('owl.jumpTo', 3)
  });

but it seems that the beta version doesn't have owl.jumpTo helper.

anyhelp ? at least for finding the documentation for the beta version

Bababob · Accepted Answer · 2017-01-05T15:50:00.940

48

Try:

$('.btnJump').click(function(){
    $('#myCarousel').trigger('to.owl.carousel', 3)
  });

Documentation can be found here: https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

edited Jan 05 '17 at 15:50

answered Oct 06 '14 at 11:31

Bababob

496
9
9

4

but this animates to the slide.. how can I jump without animation? – Imran Bughio Nov 16 '15 at 07:03
I am also looking for a solution without animation. – iMax Mar 10 '16 at 11:06
It's sliding all carousle available in the page though I am using particular ID. Any idea? – Jimba Tamang Dec 15 '16 at 00:37
Super G. Saved my time instead of surfing – Thameem Nov 16 '19 at 05:10

score 8 · Answer 2 · answered Apr 30 '16 at 17:01

8

For Owl Carousel 2.x.x I try this if you want to jump to item 0 with animation

$('#myowl').trigger('to.owl.carousel', [0,0,true])

answered Apr 30 '16 at 17:01

Tiger developer

254
3
12

Weird..without `true` in there the items are out of sync. Its like it scrolls by page rather than by item. – Ronnie May 22 '18 at 21:32
It works, but in the official doc there are only two Parameter: `[position, speed]`, where from this third parameter came – Pradeep Singh May 11 '19 at 09:13

score 4 · Answer 3 · answered Dec 15 '15 at 19:30

4

It's a shame this wasn't documented anywhere :/

jumpTo doesn't appear to be working in owl carousel 2, however you can use to and pass in an array of params. The first param is the slide, the second param is animation speed. Sending a 0 tells it to not animate at all.

owl.trigger('to.owl.carousel', [3, 0]);

answered Dec 15 '15 at 19:30

Mark Shust at M.academy

6,300
4
32
50

2

Are you on the latest beta code? Seems to be working good for me, where `owl` is the jquery dom element of the carousel (`owl = $('.carousel')`) – Mark Shust at M.academy Dec 17 '15 at 20:02
I am working on the latest beta code. Not working for me :(, it still animates the change. Maybe because I use `animateOut: 'fadeOut'` ? – iMax Mar 10 '16 at 11:07
Setting the speed to 0 didn't work for me either, but setting to 1 does the job. You can't see any animation when it's that low. – developering Apr 01 '16 at 17:02

score 1 · Answer 4 · answered May 31 '18 at 10:10

    //Initialize Plugin
$(".owl-carousel").owlCarousel()

//get carousel instance data and store it in variable owl
var owl = $(".owl-carousel").data('owlCarousel');

//Public methods
owl.next()   // Go to next slide
owl.prev()   // Go to previous slide
owl.goTo(x)  // Go to x slide

score 1 · Answer 5 · answered May 23 '19 at 09:43

1

For Owl Carousel v2.3.4 I found you need to do the following:

var owl = $('.owl-carousel').data('owl.carousel');
owl.to(slide number[,slide speed])

answered May 23 '19 at 09:43

Jono

462
1
10
24

score 0 · Answer 6 · answered Jan 15 '19 at 12:29

0

You can simply pass the slide index to the .carousal function.
Try the below code :

$('.btnJump').click(function(){
    $('#myCarousel').carousel(3);
});

answered Jan 15 '19 at 12:29

Mahak Choudhary

1,286
1
16
13

Owl Carousel 2 beta , jump to a specific slide

6 Answers6