加载时选择“项目”2 - Owl Carousel

Question

您好，我只是想知道如何在页面加载后选择第二项？

例如 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>

有什么方法可以用 Owl Carousel 做到这一点？

谢谢，尼克

Answer 1

对于 Owl Carousel 2，使用 to.owl.carousel 事件：

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

Answer 2

您可以尝试使用事件“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" 将直接转到您给它的索引。 “owl.jumpTo”会将轮播设置为所需索引的动画。