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

我猜您的图片大于15px，这就是您不能看到它们的原因。如果是这种情况，请执行以下操作：

background-size: contain;

为什么要使用伪元素

.slick-下::前

下一个按钮？这是不必要的。同样适用于＆＃34;内容＆＃34; slick-prev按钮上的属性。

这样做：

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

如何在Slick Slider中自定义箭头？

1 个答案: