<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<div class="swiper-area">
<div class="column-left">
<div class="swiper swiper1">
<div class="swiper-wrapper">
<div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
</div>
</div>
<a href="#" class="swiper-pagination"></a>
</div>
<div class="column-right">
<div class="swiper swiper2">
<div class="swiper-wrapper">
<div class="swiper-slide">1</div>
<div class="swiper-slide">2</div>
<div class="swiper-slide">3</div>
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
* {
margin: 0;
padding: 0;
}
.swiper-area {
display: flex;
justify-content: space-between;
width: 500px;
margin: 50px auto 0;
}
.swiper-area > div {
width: calc((100% - 50px) / 2);
}
.swiper-area .swiper-slide {
height: 120px;
font-size: 50px;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
}
.swiper1 .swiper-slide {
background: #000;
}
.swiper2 .swiper-slide {
background: royalblue;
}
.swiper-area .swiper-pagination-bullet {
width: 15px;
height: 15px;
}
const swiper1 = new Swiper('.swiper1', {
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
const swiper2 = new Swiper('.swiper2', {
effect: 'fade',
touchRatio: 0,
loop: true,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
swiper1.on('slideChange', function () {
idx = swiper1.realIndex;
swiper2.slideToLoop(idx);
});
