2015-07-24 19 views
14

Wczoraj przygotowałem stronę internetową dla klienta. Zawsze używam karuzeli Owl, ponieważ jest responsywna. Klient jak zawsze nienawidził poprzednich, następnych słów i chciał zmienić je na strzałki.Jak zrobić karuzelę sową ze strzałkami zamiast następnej poprzedniej

Tak więc zaktualizowałem swój skrypt. plik js. Było to bardzo łatwe i chciałem się nim podzielić.

$(document).ready(function(){ 
$('.owl-carousel').owlCarousel({ 
    nav:true, 
    responsive:{ 
    ... 
}) 
$(".owl-prev").html('<i class="fa fa-chevron-left"></i>'); 
$(".owl-next").html('<i class="fa fa-chevron-right"></i>'); 
}); 

Wystarczą, że to masz. Zawsze możesz dodać więcej stylizacji. (Pierwszy raz używam odpowiedź na swoje pytanie nadzieję, że to właściwe miejsce/stronę)

Odpowiedz

3

ten sposób można to zrobić w funkcji $(document).ready() z FontAwesome ikon:

$(".owl-prev").html('<i class="fa fa-chevron-left"></i>'); 
$(".owl-next").html('<i class="fa fa-chevron-right"></i>'); 
13

notatkę dla innych, którzy mogą używać karuzeli Owl v 1.3.2:

Możesz zamienić tekst nawigacji w ustawieniach, w których włączasz nawigację.

navigation:true, 
navigationText: [ 
    "<i class='fa fa-chevron-left'></i>", 
    "<i class='fa fa-chevron-right'></i>" 
] 
+0

jeśli szukasz na karuzeli sowa 2 zmienili nazwy opcji nawigacji do nav i navigationText do navText –

27

Jeśli używasz Owl Carousel 2, należy użyć następujących:

$(".category-wrapper").owlCarousel({ 
    items : 4, 
    loop : true, 
    margin : 30, 
    nav : true, 
    smartSpeed :900, 
    navText : ["<i class='fa fa-chevron-left'></i>","<i class='fa fa-chevron-right'></i>"] 
    }); 
+0

ten powinna być zaakceptowaną odpowiedzią. – Cam