[Slick]How to show parts of both sides of slick slider

slick show both sideFrontend

In this article, I am going to describe about how to show parts of both sides 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】





①Create a normal slick slider

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

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

<style>
    .slider{
        width:70%;
        margin:0 auto;
    }
    .slider img{
        width:100%;
    }
    .slider .slick-slide{
        height:auto!important;
    }
    .slider .slick-arrow{
        z-index:2!important;
    }
    .slider .slick-next{
        right:0!important;
    }
    .slider .slick-prev{
        left:0!important;
    }
</style>

<div class="slider">   
    <div><img src="./img/slider_image1.png"></div>
    <div><img src="./img/slider_image2.png"></div>   
    <div><img src="./img/slider_image3.png"></div>
</div>

<script>
    $('.slider').slick({
        autoplay: true,         //autoplay
        dots: true,             //dots
        infinite: true,         //loop
        pauseOnHover: false,    //don't stop when hoverd
    })
</script>

Now we can see a normal slick slider.

slider_image
slider_image
slider_image







②CenterModeを指定する

We can show the slides of both side by setting centerMode option true.
And we can decide how much to show by centerPadding option.

$('.slider').slick({
    autoplay: true,
    dots: true,
    infinite: true,
    pauseOnHover: false,
    centerMode:true,        //added
    centerPadding:"20%",    //added
})

The slides of both side has been shown.

slider_image
slider_image
slider_image


connaiconnai

③Create a gap between slides

Now there are no gap between slides and sticking together, so let’s create a gap.

.slider .slick-slide{
    margin-right: 1vw!important;
    margin-left: 1vw!important;
}

The gap between slides have been created!

slider_image
slider_image
slider_image





If you want to know other 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.

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

<style>
    .slider{
        width:70%;
        margin:0 auto;
    }
    .slider img{
        width:100%;
    }
    .slider .slick-slide{
        height:auto!important;
    }
    .slider .slick-arrow{
        z-index:2!important;
    }
    .slider .slick-next{
        right:0!important;
    }
    .slider .slick-prev{
        left:0!important;
    }
    .slick-slide{
        margin-right: 1vw!important;
        margin-left: 1vw!important;
    }
</style>

<div class="slider">   
    <div><img src="./img/slider_image1.png"></div>
    <div><img src="./img/slider_image2.png"></div>   
    <div><img src="./img/slider_image3.png"></div>
</div>

<script>
    $('.slider').slick({
        autoplay: true,         //autoplay
        dots: true,             //dots
        infinite: true,         //loop
        pauseOnHover: false,    //don't stop when hoverd
        centerMode:true,        //show the slides of both side 
        centerPadding:"20%",    //how much to show the slides of both side 
    })
</script>






That is all, it was about how to show parts of both sides of slick slider.

Comments

Copied title and URL