Sowa Karuzela 2 Nawigacja po bokach

Question

Witam Używam karuzeli Sowa w wersji 2 i nie mogę znaleźć przykładu, aby umieścić nawigację po bokach karuzeli jak lewy i prawy strzały lub strzałki. Jak ty to robisz?

Answer 1

I właśnie to zrobił wczoraj :)

Po pierwsze upewnij się, że NAV jest włączona w config

https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html

$('#_samewidth_images').owlCarousel({ 
     margin:10, 
     autoWidth:false, 
     nav:true, 
     items:4, 
     navText : ['<i class="fa fa-angle-left" aria-hidden="true"></i>','<i class="fa fa-angle-right" aria-hidden="true"></i>'] 
    }) 

Pozwoli to wprowadzić kontrole do DOM, zobacz

https://owlcarousel2.github.io/OwlCarousel2/docs/api-classes.html

<div class="owl-carousel owl-theme owl-loaded"> 
    <div class="owl-stage-outer"> 
     <div class="owl-stage"> 
      <div class="owl-item">...</div> 
      <div class="owl-item">...</div> 
      <div class="owl-item">...</div> 
     </div> 
    </div> 
    <div class="owl-controls"> 
     <div class="owl-nav"> 
      <div class="owl-prev">prev</div> 
      <div class="owl-next">next</div> 
     </div> 
     <div class="owl-dots"> 
      <div class="owl-dot active"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
      <div class="owl-dot"><span></span></div> 
     </div> 
    </div> 
</div> 

Następny użycie CSS do pozycji następnego i Prev kontroli, to co kiedyś:

.owl-prev { 
    width: 15px; 
    height: 100px; 
    position: absolute; 
    top: 40%; 
    margin-left: -20px; 
    display: block!IMPORTANT; 
    border:0px solid black; 
} 

.owl-next { 
    width: 15px; 
    height: 100px; 
    position: absolute; 
    top: 40%; 
    right: -25px; 
    display: block!IMPORTANT; 
    border:0px solid black; 
} 
.owl-prev i, .owl-next i {transform : scale(1,6); color: #ccc;} 

Dla moich ikon użyłem czcionki Niesamowite ale można użyć czegoś podobnego. Zwróć uwagę na kod navText w kodzie javascript, w tym miejscu umieścisz niestandardowy kod HTML. Sądzę, że możesz użyć również obrazu (lub umieścić go w tle z .owl-next i .owl-prev divs. Uwaga Użyłem transformacji, aby moje strzały były wyższe