Are you struggling to customize buttons for your Slick Slider JS? I am facing a similar issue with applying my own button styles to the slider. I am interested in using arrow icons instead of the default buttons.
Here is the HTML code snippet:
<section id="testimonial"> <!-- Testimonial section -->
<div class="slider">
<div><img src="img/testimonial-1.png" alt="Testimonial from Bartholomew Watson of Abicord Consulting"></div>
<div><img src="img/testimonial-2.png" alt="Testimonial from Dwayne Ferguson of CC Collect"></div>
<div><img src="img/testimonial-3.png" alt="Testimonial from David Jamilly of Kindness UK"></div>
<div><img src="img/testimonial-4.png" alt="Testimonial from Sergey Slepov of Credit Suisse"></div>
</div>
</section>
For JavaScript, use the following code snippet:
$(document).ready(function(){
$('.slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
});
});
And for the CSS styling, you can specify your custom arrow icons like this:
.slick-next {
background: url('../img/right-arrow.png') no-repeat;
}
.slick-prev {
background: url('../img/left-arrow.png') no-repeat;
}