Javascript 将自定义按钮应用于平滑JS滑块时出现问题

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

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>

CSS:

---

通过将这些箭头添加到JS中，可以使用自定义箭头：

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

---

谢谢，这会使默认按钮消失。自定义箭头似乎被隐藏了？你的问题是-你的课程最初是否错过了前面的时间段？我回答的第一部分是添加自定义箭头，但我突然想到，这可能只是一个小小的css错误。不，最初我前面有句号，错误地将代码粘贴到这里，没有句号对不起。根据您的建议，默认按钮已经消失，但没有显示png自定义箭头。它们是否显示在检查器中？您需要更多的CSS，因为它们现在是自定义的。是的，在这个检查器中显示的内容是：HTML:CSS:.slick next{background:url（'../img/right arrow.png'）不重复；}

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

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

.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;
}