In this article, I am going to show how to make double slider which main slider and text slider work together.
I’ｍ going to pursue the matter on the premise that you know how to make normal slider with Swiper.js. So if you are new to Swiper.js, firstly check the below article.
[Swiper]How to create simple responsive slider with swiper.js
①Make main slider with swiper.js
To make it clear, we will make main swiper slider first and then make changes.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.swiper{
width: 70%;
}
.swiper img{
width: 100%;
}
</style>
<div class="swiper swiper_main">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<script>
const swiper_main = new Swiper('.swiper_main', {
loop: true,
autoplay: {
delay: 2000,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
})
</script>Now main slider has been created.
②Make text slider
This is a slider which move in conjunction with main slider, so it does not need arrows and dots.
<style>
.swiper_text{
width: 50%;
border-radius:15px;
background-color: #B0BEC5;
padding: 30px 0;
margin-top: 20px;
display: flex;
justify-content: center;
}
.swiper_text .swiper-slide{
display: flex;
justify-content: center;
}
</style>
<div class="swiper swiper_text">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="txt">
Some text for first slide<br>
Some text for first slide<br>
Some text for first slide<br>
</p>
</div>
<div class="swiper-slide">
<p class="txt">
Some text for second slide<br>
Some text for second slide<br>
Some text for second slide<br>
</p>
</div>
<div class="swiper-slide">
<p class="txt">
Some text for third slide<br>
Some text for third slide<br>
Some text for third slide<br>
</p>
</div>
</div>
</div>
<script>
//add (before script of main slider)
const swiper_text = new Swiper(".swiper_text", {
loop: true,
slidesPerView: 1,
})
</script>
Text slider has added.
The two sliders has not been interlocked.
③Interlock main slider and text slider
Interlock main slider and text slider by adding 3 lines to options of main slider as below.
Specify class name of text slider after swiper:
const swiper_main = new Swiper('.swiper_main', {
loop: true,
autoplay: {
delay: 2000,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: { //add
swiper: swiper_text, //add
}, //add
})Now main slider nd text slider has been interlocked!
When main slider move, text slider must move.
④Disable swiping of text slider
In the present state, you can swipe text slider and then a lag with main slider occur.
We need disable swiping of text slider.
By change allowTouchMove option false, you can disable swiping.
const swiper_text = new Swiper(".swiper_text", {
loop: true,
slidesPerView: 1,
allowTouchMove: false,
})If you can not swipe text sider, it is OK.
The full text of source code
In the end, I put the full text of source code
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css">
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style>
.swiper{
width:70%;
}
.swiper img{
width: 100%;
}
.swiper_text{
width: 50%;
border-radius:15px;
background-color: #B0BEC5;
padding: 30px 0;
display: flex;
justify-content: center;
}
.swiper_text .swiper-slide{
display: flex;
justify-content: center;
}
</style>
<div class="swiper swiper_main">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="./img/sample1.png"></div>
<div class="swiper-slide"><img src="./img/sample2.png"></div>
<div class="swiper-slide"><img src="./img/sample3.png"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div class="swiper swiper_text">
<div class="swiper-wrapper">
<div class="swiper-slide">
<p class="txt">
Some text for first slide<br>
Some text for first slide<br>
Some text for first slide<br>
</p>
</div>
<div class="swiper-slide">
<p class="txt">
Some text for second slide<br>
Some text for second slide<br>
Some text for second slide<br>
</p>
</div>
<div class="swiper-slide">
<p class="txt">
Some text for third slide<br>
Some text for third slide<br>
Some text for third slide<br>
</p>
</div>
</div>
</div>
<script>
const swiper_text = new Swiper(".swiper_text", {
loop: true,
slidesPerView: 1,
allowTouchMove: false,
})
const swiper_main = new Swiper('.swiper_main', {
loop: true,
autoplay: {
delay: 2000,
},
pagination: {
el: '.swiper-pagination',
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
thumbs: {
swiper: swiper_text,
},
})
</script>That is all, it was about how to make double slider with swiper.js.
As the example of slider which is made by interlocking two sliders, there is a slider like below.
[Swiper]How to create thumbnail slider
And I have been introduced various slider which can be made by swiper.js.
Swiper Demo 19 Slider
