Dodaj następny przycisk prev na zręcznej karuzeli

Question

Ostatnio dodałem Slick carousel do mojego projektu.

Czytanie tam dokumentu Widziałem, że istnieje metoda slick Prev() i slick Next().

Ale pytam cię, w jaki sposób mogę użyć tej metody. Próbowałem przez tak długi czas, ale tak naprawdę nie mogę zrozumieć, jak używać tego z html button.

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

Próbowałem w ten sposób.

Answer 1

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

Spróbuj zmienić this do "#yourid" gdzie yourid jest id suwaka.

---

Począwszy od wersji 1.4 i nowszych, zastosowanie:

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

Answer 2

Można zrobić to samo, jeśli funkcja slickPrev nie działa. Możesz przekazać nazwę funkcji jako parametr do zszycia.

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

Answer 3

Najlepszy sposób, jaki udało mi się znaleźć w tym celu. Możesz usunąć mój kod HTML i umieścić go tam.

$('.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. Inicjalizacja swój suwak w pliku skryptu i dodać ustawienia chcesz tak:

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

2. stylu klasy slick-prev i slick-next