Aggiungi il prossimo pulsante prev sul carosello slick

Question

Recentemente ho aggiunto Slick carousel al mio progetto.

Lettura documento lì ho visto c'è un metodo slick Prev() e slick Next().

Ma ti sto chiedendo come utilizzare questo metodo. Ho provato questo lungo tempo ma in realtà non riesco a capire come usare questo con html button.

$('button.next').click(function() { 
    $(this).slickPrev(); 
}); 

Ho provato in questo modo.

Answer 1

$('button.next').click(function(){ 
    $("#yourid").slickPrev(); 
}); 

provare a cambiare this al "#yourid" dove il yourid è l'ID del dispositivo di scorrimento.

---

A partire dalla versione 1.4 e successive, l'uso:

$('button.next').click(function(){ 
    $("#yourid").slick('slickPrev'); 
}); 

Answer 2

Si può fare lo stesso se la funzione slickPrev non funziona. È possibile passare il nome della funzione come parametro a slick.

$('.next').click(function(){ 
    $("#sliderId").slick('slickNext'); 
}); 

Answer 3

Il modo migliore in cui ho trovato è quello. Puoi rimuovere il mio codice HTML e posizionare il tuo lì.

$('.home-banner-slider').slick({ 
    dots: false, 
    infinite: true, 
    autoplay: true, 
    autoplaySpeed: 3000, 
    speed: 300, 
    slidesToScroll: 1, 
    arrows: true, 
    prevArrow: '<div class="slick-prev"><i class="fa fa-angle-left" aria-hidden="true"></i></div>', 
    nextArrow: '<div class="slick-next"><i class="fa fa-angle-right" aria-hidden="true"></i></div>' 
}); 

Answer 4

1. inizializzare il cursore nel file di script e aggiungere le impostazioni che si desidera in questo modo:

$('.my-slider').slick({ 
 
    arrows: true, 
 
    prevArrow: '<div class="slick-prev"><</div>', 
 
    nextArrow: '<div class="slick-next">></div>' 
 
});

2. Style le classi slick-prev e slick-next