Owl Carousel JS вернуться к первому изображению

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 для перехода к определенному слайду при наведении.

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>