title: How to add your customise arrows in slick slider JS using CSS
body: <p>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? </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> 
  
  $(document).ready(function(){
        $('.slider').slick({
          slidesToShow: 1, 
          slidesToScroll: 1, 
          autoplay: true, 
          autoplaySpeed: 2000,
    arrows: true,
         prevArrow: '&lt;div class="slick-prev"&gt;&lt;/div&gt;',
         nextArrow: '&lt;div class="slick-next"&gt;&lt;/div&gt;'
        });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.slick-next {
   background: url('../img/right-arrow.png') no-repeat;
  }
  .slick-prev {
   background: url('../img/left-arrow.png') no-repeat;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="testimonial"&gt; &lt;!-- Testimonial section --&gt;
      &lt;div class="slider"&gt; 
        &lt;div&gt;&lt;img src="img/testimonial-1.png" alt="Testimonial from Bartholomew Watson of Abicord Consulting"&gt;&lt;/div&gt;  
        &lt;div&gt;&lt;img src="img/testimonial-2.png" alt="Testimonial from Dwayne Ferguson of CC Collect"&gt;&lt;/div&gt;
        &lt;div&gt;&lt;img src="img/testimonial-3.png" alt="Testimonial from David Jamilly of Kindness UK"&gt;&lt;/div&gt;
        &lt;div&gt;&lt;img src="img/testimonial-4.png" alt="Testimonial from Sergey Slepov of Credit Suisse"&gt;&lt;/div&gt;
      &lt;/div&gt;
     &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>