[slick.js]How to customize arrows of slick slider

slick arrow customizeSlick
2022/10/24


In this article, I will describe how to customize arrows of slick slider.

I’m going to proceed on the premise that you know how to make normal slider with slick.js.
So if you are new to slick.js, firstly check the below article.
How to make Caroucel Slider with Slick.js【only 4 steps】






Contents

①Make normal slick slider

To make it easy, we will make normal slick slider first and make changes.

<div class="slider">   
    <div><img src="./img/slider_img01.jpg"></div>
    <div><img src="./img/slider_img02.jpg"></div>   
    <div><img src="./img/slider_img03.jpg"></div>
</div>

<style>
    /*------ slider width ------*/
    .slider{
        width:70%;
        margin:0 auto;
    }

    /*------ slider image ------*/
    .slider img{
        width:100%;
    }
  
    /*-------- height ----------*/
    .slider .slick-slide{
        height:auto!important;
    }

    /*--------- arrows ---------*/
    .slick-next{ right:0!important; }
    .slick-prev{ left:0!important; }
    .slick-arrow{ z-index:2!important; }
</style>

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<script>
    $('.slider').slick({
        autoplay: true,       //autoplay
        autoplaySpeed: 2000,  //autoplay speed
        speed: 800,           //slide speed
        dots: true,           //dots below slide
        arrows: true,         //arrows both sides of slide
        infinite: true,       //loop infinitely
    });
</script>




②hide defaulot arrow

.slick-arrow:before{
    content:""!important;
}




③Replace arrows with preferred image

3rd and 4th line is making width and height 100%.(to make adjustment easy)
5th~7th line is showing arrows.
11th and 16th line is replacing arrows with preferred image.

.slick-arrow:before{
    content:""!important;
    width: 100%!important;
    height: 100%!important;
    position: absolute;
    top: 0;
    left: 0;
}

.slick-next:before{
    background: url(img/arrow_r.png)!important;
    background-size: contain!important;
}

.slick-prev:before{
    background: url(img/arrow_l.png)!important;
    background-size: contain!important;
}





connaiconnai

④Adjust size and position of arrows

3rd and 4th line is adjusting size and 8th and 12th is adjusting position.

.slick-arrow{
    z-index:2!important;
    width:60px!important;
    height:60px!important;
}

.slick-next{
    right:-30px!important;
}

.slick-prev{
    left:-30px!important;
}







⑤Cancel out translucent of arrows

The translucent of arrows is caused by opacity: 0.75 with default setting.
So overwrite css style like below.

.slick-arrow:before{
    opacity:1!important;
}





If you want to know about how to customize dots, below article might be helpful.
[slick.js]How to customize dots of slick slider



Also, if you want to know variety of slick slider, below article might be helpful.
Slick Demo 7 slider






Full text of source code

In the end, I put full text of source code.
copy and paste, and change image path, you can make arrows prefered image.

<div class="slider">
	<div><img src="./img/slider_img01.jpg"></div>
	<div><img src="./img/slider_img02.jpg"></div>   
    <div><img src="./img/slider_img03.jpg"></div>
</div>

<style>
    /*------ slider width ------*/
    .slider{
        width:70%;
        margin:0 auto;
    }
    /*------ slider image ------*/
    .slider img{
        width:100%;
    }
    /*-------- height ----------*/
    .slider .slick-slide{
        height:auto!important;
    }
    /*---------- arrows ---------*/
    .slick-next{ right:-30px!important;}
    .slick-prev{ left:-30px!important; }
    .slick-next:before{
        background: url(img/arrow_r.png)!important;
        background-size: contain!important;
    }
    .slick-prev:before{
        background: url(img/arrow_l.png)!important;
        background-size: contain!important;
    }
    .slick-arrow{
        z-index:2!important;
        width:60px!important;
        height:60px!important;
    }
    .slick-arrow:before{
        content:""!important;
        width: 100%!important;
        height: 100%!important;
        position: absolute;
        top: 0;
        left: 0;
        opacity:1!important;
    }
</style>


<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>


<script>
    $('.slider').slick({
        autoplay: true,       //autoplay
        autoplaySpeed: 2000,  //autoplay speed
        speed: 800,           //slide speed
        dots: true,           //dots below slide
        arrows: true,         //arrows both sides of slide
        infinite: true,       //loop infinitely
    });
</script>





Sponsored Links

Sponsored Links

Comments

Copied title and URL