如何将自定义按钮应用于Slick Slider 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>
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;
}
答案 0 :(得分:0)
您可以通过将这些箭头添加到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;
}