How in the Owl carousel to hide the arrows of the next / previous slide in the absence of an infinite loop?

I will give an example of pictures First position The first position. Second position

After clicking the forward arrow

enter image description here

Last position, no more slides.

Do some of the sliders have this set by default, if the ability to connect this effect here?

    2 answers 2

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

      At owlCarousel, when the loop off, navigation elements, when extending to the end, get the class .disabled . Register the selector with display: none; .