Owl Carousel JS zurück zum ersten Bild

Question

Ich habe ein OwlCarousel mit Nav-Links innerhalb der ersten Folie, gibt es eine Möglichkeit, das Karussell auf die erste Folie nach einem Ereignis, sei es ein Timer oder wenn die Maus auszieht des Karussells? Ist es auch möglich, das Karussell auszulösen, indem man über eine Verbindung fährt anstatt sie zu klicken?

-Code-Schnipsel:

  <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

Nach dem owlCarousel's docs können Sie die to.owl.carousel Funktion verwenden, um bestimmte Position zu gleiten.

Hier ist ein Beispiel für beide - gehen Sie zur ersten Folie (Folien Nummerierung beginnt mit 0) und schweben Sie auf die li Elemente, um zu einer bestimmten Folie bei Hover zu gelangen.

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>