javascript - 将自定义按钮应用于 Slick JS slider 的问题

Question

如何将自定义按钮应用于 Slick Slider JS。我在将自己的按钮样式应用于 slider 时遇到问题。我想使用箭头图标而不是默认按钮。

HTML:

<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>

JS:

$(document).ready(function(){
      $('.slider').slick({
        slidesToShow: 1, 
        slidesToScroll: 1, 
        autoplay: true, 
        autoplaySpeed: 2000
      });
});

CSS:

.slick-next {
 background: url('../img/right-arrow.png') no-repeat;
}
.slick-prev {
 background: url('../img/left-arrow.png') no-repeat;
}

Answer 1

您可以通过将这些添加到您的 JS 来使用自定义箭头:

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

这会将带有这些类的 div 放到 DOM 中，您可以根据需要设置样式。

---

或者，您可以修改现有按钮，而不是上面的按钮:

.slick-next {
    background: url('../img/right-arrow.png') no-repeat !important;
}
.slick-prev {
    background: url('../img/left-arrow.png') no-repeat !important;
}
.slick-next::before, .slick-prev::before {
    content: "" !important;
}