貓頭鷹旋轉木馬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返回第一張圖像

回答

相關問題