Owl carousel Как скрывать стрелочки навигации при отсутствии цикла

482

24 ноября 2017, 05:14

Как в Owl carousel скрывать стрелочки следующего/предыдущего слайда при отсутствии бесконечного цикла ?

Приведу пример картинками Первая позиция.

После нажатия стрелки Вперед

Последняя позиция, больше слайдов нету.

У некоторых слайдеров такое задано по умолчанию, если возможность подкючить данный эффект тут ?

Answer 1

$(document).ready(function() {  
  var owl = $("#owl-example"); 
  owl.owlCarousel({ 
      nav: true,   
  });  
});

.owl-next.disabled, .owl-prev.disabled  { 
  display: none !important; /*Скрыть неактивную кнопку*/ 
} 
 
 
/*css для примера*/ 
.owl-nav { 
    display: flex; 
    width: 100%; 
    height: 15px; 
    padding: 15px 0; 
} 
.owl-nav div { 
    width: 40px; 
    height: 17px; 
    text-align: center; 
    background: #8BC34A; 
    padding: 10px; 
    color: white; 
    text-transform: uppercase; 
    margin:1px; 
} 
/*css для примера*/

<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.2.1/assets/owl.carousel.css">  
<link rel="stylesheet" href="owl-carousel/owl.theme.css">    
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script> 
 
<div id="owl-example"  class="owl-carousel owl-theme"> 
 <div class="item"><img src="http://www.fepsearchgroup.com/demos/assets/owl1.jpg" alt="Owl Image"></div> 
  <div class="item"><img src="http://www.fepsearchgroup.com/demos/assets/owl2.jpg" alt="Owl Image"></div> 
  <div class="item"><img src="http://www.fepsearchgroup.com/demos/assets/owl3.jpg" alt="Owl Image"></div> 
  <div class="item"><img src="http://www.fepsearchgroup.com/demos/assets//owl4.jpg" alt="Owl Image"></div> 
  <div class="item"><img src="http://www.fepsearchgroup.com/demos/assets/owl5.jpg" alt="Owl Image"></div>  
</div>