如何在Slick Slider中自定義箭頭？

Question

我似乎無法使用我自己的自定義箭頭來使用光滑的滑塊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：

.slick-next::before {
        background: url('../img/right-arrow.png') no-repeat;
        content: "";
        display: block;
        height: 15px;
        width: 15px;
}
.slick-prev {
        background: url('../img/left-arrow.png') no-repeat;
        content: "";
        display: block;
        height: 15px;
}

JS：

$(document).ready(function(){
      $('.slider').slick({
        slidesToShow: 1, 
        slidesToScroll: 1, 
        autoplay: true, 
        autoplaySpeed: 2000,
        arrows: true,
        prevArrow: '<div class="slick-prev"></div>',
        nextArrow: '<div class="slick-next"></div>'
      });

});

Answer 1

我想你的圖像大於15像素，這就是你沒有看到它們的原因。 如果是這種情況，請執行以下操作：

background-size: contain;

為什么要使用偽元素？

.slick，未來::前

下一個按鈕？ 那是不必要的。 “光滑前”按鈕上的“內容”屬性也是如此。

這樣做：

.slick-prev, .slick-next {
    height: 15px;
    width: 15px;
    background-size: contain;
    background-repeat: no-repeat;

    /* to position the arrows left and right at the bottom of slider */
    position: absolute;
    z-index: 10;
    bottom: 0;
}

.slick-prev {
    background-image: url('../img/left-arrow.png');

    /* place button left */
    left: 0;
}
.slick-next {
    background-image: url('../img/right-arrow.png');

    /* place button right */
    right: 0;
}