CODEWITHSUNDEEP
javascriptjqueryhtmlowl-carousel
Nick M
Nick M

Reputation: 187

Select 'item' 2 on load - Owl Carousel

Hello I am just wondering how I can select the second item when the page has loaded?

For example Owl Carousel usually starts on the first item and then displays the next item after that within the HTML structure however when the page loads I'd like it to display the second item class in the HTML below:

<div class="full-screen-slider">
    <div id="banner-slider-demo-1" class="owl-carousel owl-theme owl-middle-narrow owl-banner-carousel">
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
        </div>
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
        </div>
        <div class="item" style="background:#f0f0f0;background-image:linear-gradient(#e8e8e8,#f0f0f0);position:relative;">
        </div>
    </div>
   <script type="text/javascript">
        jQuery(function($){
           $("#banner-slider-demo-1").owlCarousel({stopOnHover: true,pagination: true, autoPlay: false,navigation: false,paginationSpeed : 500,singleItem:true,});
        });

    </script>
</div>

Is there any way that I can do this with Owl Carousel?

Thanks, Nick

Upvotes: 2

Views: 11648

Answers (3)

Vagner Zaham
Vagner Zaham

Reputation: 1

In OwlCarousel 2 the event has been renamed.
The first parameter is position the second is speed:

carousel.trigger('to.owl.carousel', [2, 300]);

You can find more information in the official documentation.

Upvotes: 0

Josh Noe
Josh Noe

Reputation: 2798

For Owl Carousel 2, use the to.owl.carousel event:

carousel.trigger('to.owl.carousel', index);

Upvotes: 6

Kyle Boucher
Kyle Boucher

Reputation: 108

You can try using the event "owl.jumpTo" or "owl.goTo"

jQuery(function($){
       var carousel = $("#banner-slider-demo-1");
       carousel.owlCarousel({stopOnHover: true,pagination: true, autoPlay: false,navigation: false,paginationSpeed : 500,singleItem:true,});
       carousel.trigger('owl.goTo', 2) 
    });

"owl.goTo" will go straight to the index you give it. "owl.jumpTo" will animate the carousel to the required index.

Upvotes: 2

Related Questions