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

您可以尝试使用事件＆＃34; owl.jumpTo＆＃34;或＆＃34; owl.goTo＆＃34;

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) 
    });

＆＃34; owl.goTo＆＃34;将直接进入你给它的索引。＆＃34; owl.jumpTo＆＃34;将旋转木马动画为所需的索引。

选择＆＃39;项目＆＃39; 2负载 - 猫头鹰转盘

2 个答案: