猫头鹰旋转木马JS返回第一张图像

我有第一张幻灯片中的导航链接的猫头鹰卡通，有没有办法让旋转木马返回到事件后的第一张幻灯片，无论是计时器，还是当鼠标移出的旋转木马？也可以通过鼠标悬停在链接上而不是点击鼠标来触发传送带？猫头鹰旋转木马JS返回第一张图像

代码片段：

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

来源

2016-08-23 arthur

你检查的答案吗？ – Dekel

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

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

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

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

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

来源

2016-08-24 01:17:30 Dekel

猫头鹰旋转木马JS返回第一张图像

回答

相关问题