[slick]How to make Caroucel Slider with slick.js[only 4 steps]

SlickスライダーFrontend

Now there are many libraries which can make a caroucel silder, slick.js is one of the best option because it is customizable, responsive and mobile friendly.

In this articl, I will show you how to create caroucel slider with slick.js
Only 4 steps.

1. load required library from CDN

Although there is a way downloading files, here we use CDN because it’s useful.
we use 4 libraries, write as below.(jQuery is also included) 

<!-------------------- slick CSS ---------------------------------------------------------------------------------------->
<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">
<!-----------------------------------------------------------------------------------------------------------------------> 

<!--------------------jQuery-----------------------------------------------------------> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<!------------------------------------------------------------------------------------->  

<!-------------------- slick JS ----------------------------------------------------------------------------------------->  
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-----------------------------------------------------------------------------------------------------------------------> 



2.HTML:prepare required parts for slick slider

you can use anything for most parent class. (here I make it “slider”)

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

3 images are arranged vertically.


connaiconnai

3.Javascript : create a slider

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

Now it became slider! All that is left is fixing the look with css.



4.CSS : fixing the look with css

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

/*------ slider image ------*/
.slider img{
	width:100%;
}

/*-------- height ----------*/
.slider .slick-slide{
	height:auto!important;
}

/*--------- arrows ---------*/
.slider .slick-next{
    right:0!important;
}
.slider .slick-prev{
    left:0!important;
}
.slider .slick-arrow{
    width: initial!important;
    height: initial!important;
    z-index:2!important;
}
.slider .slick-arrow:before{
    font-size: 30px!important;
}



Now it looks good!



When you want to change position or size of arrows, change value of property below.
To change position:right and left of .slick-next and .slick-prev
To change size:font-size of .slick-arrow:before



Extra:arrow customizing

Below code will customize position, size color of arrows.

.slider .slick-next{
    right:20px!important;
}
.slider .slick-prev{
    left:20px!important;
}
.slider .slick-arrow:before{
    font-size: 60px!important;
    color:red!important;
}





Slick slider is customizable.
If you want to know more about slick slider, below articles might be helpful.
[slick.js]How to customize arrows of slick slider
[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





The full text of source code.

In the end, I put the full text of source code.

<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 ---------*/
    .slider .slick-next{
        right:0!important;
    }
    .slider .slick-prev{
        left:0!important;
    }
    .slider .slick-arrow{
        width: initial!important;
        height: initial!important;
        z-index:2!important;
    }
    .slider .slick-arrow:before{
        font-size: 30px!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.6.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>





That’s all, it was about How to make Caroucel Slider with Slick.js

Comments

Copied title and URL