Question

我在第一张幻灯片中有一个带有导航链接的OwlCarousel，有没有办法让旋转木马在事件发生后返回到第一张幻灯片，无论是计时器还是鼠标移出旋转木马？是否也可以通过鼠标悬停在链接而不是点击它来触发轮播？

代码段：

            <div class="owl-carousel">
                <div class="item" data-hash="slide0">
                    <ul>
                        <li><a class="button secondary url" href="#slide1">1</a></li><br/>
                        <li><a class="button secondary url" href="#slide2">2</a></li><br/>
                        <li><a class="button secondary url" href="#slide3">3</a></li><br/>
                        <li><a class="button secondary url" href="#silde4">4</a></li><br/>
                        <li><a class="button secondary url" href="#slide5">5</a></li><br/>
                        <li><a class="button secondary url" href="#slide6">6</a></li><br/>
                    </ul>
                </div>
                <div class="item" data-hash="slide1">
                    //some image
                </div>
                <div class="item" data-hash="slide2">
                    //some image
                </div>
                <div class="item" data-hash="slide3">
                    //some image
                </div>
                <div class="item" data-hash="slide4">
                    //some image
                </div>
                <div class="item" data-hash="slide5">
                    //some image
                </div>
                <div class="item" data-hash="slide6">
                    //some image
                </div>
            </div>

Answer 1

根据owlCarousel's docs，您可以使用to.owl.carousel功能滑动到特定位置。

以下是两个示例 - 转到第一张幻灯片（幻灯片编号从0开始）并将鼠标悬停在li元素上，以便在悬停时转到特定幻灯片。

＆＃13;

var owl;
$(document).ready(function(){
  owl = $(".owl-carousel").owlCarousel({items:1});
  $('#btn1').click(function() {
    owl.trigger('to.owl.carousel', [0, 400]);
  });
  
  $('#ul1 li').hover(function() {
    owl.trigger('to.owl.carousel', [parseInt($(this).text()) - 1, 400]);
  });
});

＆＃13;

body {
  margin: 0;
  padding: 0;
}

.owl-carousel .item {
  height: 120px;
  background: #4DC7A0;
  padding: 1rem;
  list-style: none;
  margin: 10px;
  text-align: center;
  color: white;
  font-size: 20px;
  line-height: 120px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.carousel.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/assets/owl.theme.default.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.1.6/owl.carousel.min.js"></script>
<!-- Set up your HTML -->

<div class="owl-carousel">
  <div class="item"> slide1 </div>
  <div class="item"> slide2 </div>
  <div class="item"> slide3 </div>
  <div class="item"> slide4 </div>
  <div class="item"> slide5 </div>
  <div class="item"> slide6 </div>
  <div class="item"> slide7 </div>
  <div class="item"> slide8 </div>
  <div class="item"> slide9 </div>
  <div class="item"> slide10 </div>
  <div class="item"> slide11 </div>
  <div class="item"> slide12 </div>
</div>

<button id="btn1">Go to first</button>
<ul id="ul1">
  <li>1</li>
  <li>5</li>
  <li>10</li>
</ul>

＆＃13;

Owl Carousel JS返回第一张图片

1 个答案: