Come fare una giostra con le frecce al posto del prossimo precedente

Question

ieri ho messo in preallarme un sito web a un cliente. Io uso sempre il carosello del gufo poiché è reattivo. Il cliente come mai odiava le parole precedenti e successive e voleva cambiarle in frecce.

Quindi ho aggiornato il mio script. file js. E 'stato molto facile da fare e volevo condividerlo.

$(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>'); 
}); 

Wel there you it it. Puoi sempre aggiungere più styling. (Prima volta che uso una risposta alla tua domanda Spero che questo sia il posto giusto/strada)

Answer 1

Questo è come lo fate nel vostro $(document).ready() funzione con FontAwesome Icone:

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

Answer 2

Una nota per gli altri che possono utilizza Owl Carousel v 1.3.2:

È possibile sostituire il testo di navigazione nelle impostazioni in cui si abilita la navigazione.

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

Answer 3

Se stai usando Owl Carousel 2, allora si dovrebbe utilizzare il seguente:

$(".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>"] 
    });