[Slick]How to create double slider by slick.js

double sliderSlick
2022/12/26




In this article,I am going to describe about how to create double slider by slick.js.



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

①Create main slider and text slider

First of all, create two of normal sliders. One has image for its content, other one has texts.

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

    #double-slider{
        width:60%;
        margin: 0 auto;
    }
</style>

<div id="double-slider">
    <div id="main-slider">
        <img src="./img/slider_img01.jpg">
        <img src="./img/slider_img02.jpg">
        <img src="./img/slider_img03.jpg">
    </div>
    <div id="text-slider">
        <p class="txt">
            The text for first slide<br>
            The text for first slide<br>
            The text for first slide<br>
        </p>
        <p class="txt">
            The text for second slide<br>
            The text for second slide<br>
            The text for second slide<br>
        </p>
        <p class="txt">
            The text for third slide<br>
            The text for third slide<br>
            The text for third slide<br>
        </p>
    </div>
</div>

<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>
	$("#main-slider").slick({
		// options here
	})
	$("#text-slider").slick({
		// options here
	})
</script>

At this point, the two sliders has not been interlocked yet.

The text for first slide
The text for first slide
The text for first slide

The text for second slide
The text for second slide
The text for second slide

The text for third slide
The text for third slide
The text for third slide





②Interlock two sliders

Lets interlock main slider and text slider.
And following 3 things as well.

・make main slider autoplay
・restrict dragging text slider
・hide arrows of text slider

$("#main-slider").slick({
    asNavFor:"#text-slider", //added(make text slider follow)
    autoplay:true            //added(autoplay)
})
$("#text-slider").slick({
    draggable:false,         //added(restrict dragging)
    arrows:false             //added(hide arrows)
})

Now the sliders have been interlocked!
If you move main slider, text slider will follow.

The text for first slide
The text for first slide
The text for first slide

The text for second slide
The text for second slide
The text for second slide

The text for third slide
The text for third slide
The text for third slide







③Decorate text slider

#text-slider{
    width: 80%;
    margin: 30px auto 0;
    padding: 30px 0;
    text-align: center;
    border-radius: 10px;
    background: #FFEB3B;    
}

Double slider has been completed.

The text for first slide
The text for first slide
The text for first slide

The text for second slide
The text for second slide
The text for second slide

The text for third slide
The text for third slide
The text for third slide





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







connaiconnai

The full text of source code

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

<style>
    .slick-slide{ height: auto!important; }
    .slick-arrow{ z-index: 2; }
    .slick-prev{ left: 0!important; } 
    .slick-next{ right: 0!important; }

    #double-slider{
        width:60%;
        margin: 0 auto;
    }

    /* style of text slider */
    #text-slider{
        width: 80%;
        margin: 30px auto 0;
        padding: 30px 0;
        text-align: center;
        border-radius: 10px;
        background: #FFEB3B;    
    }
</style>

<div id="double-slider">
    <div id="main-slider">
        <img src="./img/slider_img01.jpg">
        <img src="./img/slider_img02.jpg">
        <img src="./img/slider_img03.jpg">
    </div>
    <div id="text-slider">
        <p class="txt">
            The text for first slide<br>
            The text for first slide<br>
            The text for first slide<br>
        </p>
        <p class="txt">
            The text for second slide<br>
            The text for second slide<br>
            The text for second slide<br>
        </p>
        <p class="txt">
            The text for third slide<br>
            The text for third slide<br>
            The text for third slide<br>
        </p>
    </div>
</div>


<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>
$("#main-slider").slick({
    asNavFor:"#text-slider", //make text slider follow
    autoplay:true            //autoplay
})
$("#text-slider").slick({
    draggable:false,         //restrict dragging
    arrows:false             //hide arrows
})
</script>








That is all, it was about how to create double slider by slick.js.

Sponsored Links

Sponsored Links

Comments

Copied title and URL