How do I add my very own customise arrows to slick slider. I have manage to override the default buttons of slick slider. But my very own customise arrows do not seem to show. What can I do to resolve this issue?

 

$(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>'
      });
});

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

How do I add my very own customise arrows to slick slider. I have manage to override the default buttons of slick slider. But my very own customise arrows do not seem to show. What can I do to resolve this issue?

 

$(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>'
      });
});

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

• javascript
• jquery
• html
• css

• 1 add your code jsfiddle – Lalji Tadhani Commented Jan 20, 2016 at 6:34
• Your js isn't adding the <div class="slick-prev"></div> or <div class="slick-next"></div> to the html, and I know nothing about js – Carol McKay Commented Jan 20, 2016 at 7:01

2 Answers 2

This worked for me:

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

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>