Select 'item' 2 正在加载 - Owl 轮播

Question

您好，我想知道如何在页面加载后 select 第二项？

例如 Owl 轮播通常从第一个项目开始，然后在 HTML 结构中显示下一个项目，但是当页面加载时我希望它显示第二个项目class 在下面的 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 轮播来做到这一点？

谢谢，尼克

Answer 1

您可以尝试使用事件 "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" 将使轮播动画化到所需的索引。

Answer 2

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

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

Select 'item' 2 正在加载 - Owl 轮播

Select 'item' 2 on load - Owl Carousel

html

javascript

jquery

owl-carousel