选择'item'2 on load - Owl Carousel

时间:2022-11-04 08:01:56

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:

例如,Owl Carousel通常从第一个项目开始,然后在HTML结构中显示之后的下一个项目,但是当页面加载时,我希望它在下面的HTML中显示第二个项目类:

<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?

我有什么方法可以用Owl Carousel做到这一点吗?

Thanks, Nick

谢谢,尼克

2 个解决方案

#1


1  

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

您可以尝试使用事件“owl.jumpTo”或“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.

“owl.goTo”会直接显示你给它的索引。 “owl.jumpTo”会将轮播动画设置为所需的索引。

#2


3  

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

对于Owl Carousel 2,使用to.owl.carousel事件:

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

#1


1  

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

您可以尝试使用事件“owl.jumpTo”或“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.

“owl.goTo”会直接显示你给它的索引。 “owl.jumpTo”会将轮播动画设置为所需的索引。

#2


3  

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

对于Owl Carousel 2,使用to.owl.carousel事件:

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