Set active item in owlCarousel

Question

I have a owl carousel with 3 items, the carousel displays one item per page. Inside each item I have html inputs.

I want to programmatically change the active item so I can make focus on input inside it.

Here is the initial configuration:

var owl = $("#selector").owlCarousel({
    slideSpeed: 300,
    paginationSpeed: 400,
    items: 1,
    itemsDesktop: false,
    itemsDesktopSmall: false,
    itemsTablet: false,
    itemsMobile: false,
    dots: false,
    touchDrag: false,
    mouseDrag: false
});

And the html looks like this:

<div id="selector" class="owl-carousel owl-theme">
    <div class="item">
        <input type="text" name="name1" id="input1">
     </div>

    <div class="item">
        <input type="text" name="name2" id="input2">
     </div>

    <div class="item">
        <input type="text" name="name3" id="input3">
     </div>
</div>

For example: if I want to make focus on input3, I have to set the current page to 3 and then set the focus.

score 8 · Accepted Answer · edited Jun 26 '18 at 08:33

8

to.owl.carousel the event goes to a position.

Parameter: [position, speed]

$("#selector").trigger("to.owl.carousel", [2, 1])

As per the events docs: http://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html

edited Jun 26 '18 at 08:33

Sender

6,660
12
47
66

answered Apr 03 '16 at 21:50

Tyler

11,272
9
65
105

1

tyler thanks for your answer. It worked with a minimal change. `$("#carousel").trigger("to.owl.carousel", [2, 1, true]);`. I found it at [this issue on Github](https://github.com/OwlCarousel2/OwlCarousel2/issues/166#issuecomment-46452372). – anyeloamt Apr 03 '16 at 22:15
@anyeloamt great, I've updated my answer to reflect it. Feel free to mark as correct so that others searching around will know you got an answer – Tyler Apr 03 '16 at 22:47
@tyler The Link in the answer is down. Meanwhile: https://owlcarousel2.github.io/OwlCarousel2/docs/api-events.html what does the true represent? – Type-Style Dec 23 '16 at 14:49

Set active item in owlCarousel

1 Answers1