如何在使用CSS的滑动滑块JS中添加自定义箭头

Question

如何将我自己的自定义箭头添加到滑动滑块。我设法覆盖了滑动滑块的默认按钮。但我自己的定制箭头似乎并没有显示出来。我能做些什么来解决这个问题？

 

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

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

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

Answer 1

Use CSS like below,you can change the dimension of images as per your custom arrow images. 

<pre> 

.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; 
     width: 15px; 
} 
</pre> 

Answer 2

这为我工作：

.slick-prev:before { 
    content: url('your-left-arrow.png'); 
} 
.slick-next:before { 
    content: url('your-right-arrow.png'); 
}