Add Custom Arrow In Slick Slider

Here, we have a requirement to add custom arrows in Slick Slider. Slick Slider has its own buttons, but sometimes we want to change the arrow buttons in Slick Slider based on design requirements. These arrows may be placed outside the slider or in a different location within the DOM.

We will try to achieve this requirement in Slick Slider with custom arrows using custom coding within the Slick Slider initialization script. When we click on the next and previous buttons, Slick Slider will navigate through the slides.

My diractly adding the cutom arrow class in initializing script as below

 $('.slick-slide-main').slick({
        prevArrow: $('.arrow-prev-cus'),
      nextArrow: $('.arrow-next-cus'),
      });

Let’s start with a simple implementation of Slick Slider.

 <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

Thw above code you can get from the slick slider main website https://kenwheeler.github.io/slick/

We must need to add jquery also in our page and slick slider js

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

Below is the markup for slickslider

<div class="your-class">
  <div>your content</div>
  <div>your content</div>
  <div>your content</div>
</div>

The below is the script to initalize the slider

<script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

So the complete working Slick slider code is as below

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css"/>

<div class="slider-container">
  <div class="slick-slide-main">
    <div><img src="images/slide-one.jpg"/></div>
    <div><img src="images/slide2.jpeg"/></div>
    <div><img src="images/slide4.jpeg"/></div>
    <div><img src="images/slide5.jpeg"/></div>
  </div>
</div>

  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.slick-slide-main').slick({
        
      });
    });
  </script>

The above is the basic slick slider implimentation, now lets add Custom arrows in Slick slider, for this we will create another container and inside this we will impliment custom arrows

Below is the markup, where botton-container is the container different from slider container and we are going to impliment slick slider next prev button outside of main slider container

<div class="slider-container">
  <div class="slick-slide-main">
    <div><img src="images/slide-one.jpg"/></div>
    <div><img src="images/slide2.jpeg"/></div>
    <div><img src="images/slide4.jpeg"/></div>
    <div><img src="images/slide5.jpeg"/></div>
  </div>
  <div class="botton-container">
    <span class="arrow-prev-cus"><</span><span class="arrow-next-cus">></span>
</div>
</div>

 $('.slick-slide-main').slick({
        prevArrow: $('.arrow-prev-cus'),
      nextArrow: $('.arrow-next-cus'),
      });

The above is the javascript code to impliment cistom arrows in slider, lets go thourgh the working demo as below

<>

More Into Slick Slider