console
var idx = 0;
idxChange(idx)
window.onload = function () {
var my1 = new Swiper('#s1', {
slidesPerView: 'auto'
});
var my2 = new Swiper('#s2', {
})
my1.on('tap', function (event) {
console.log(this.clickedIndex);
idx = this.clickedIndex;
idxChange(idx)
this.slideTo(this.clickedIndex);
my2.slideTo(this.clickedIndex);
})
my2.on('slideChange', function (event) {
console.log(this.activeIndex);
idx = this.activeIndex;
idxChange(idx);
my1.slideTo(this.activeIndex);
});
}
function idxChange(idx) {
$('#s1 .swiper-slide').removeClass('active');
$('#s1 .swiper-slide').eq(idx).addClass('active');
}
<div id="s1" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
</div>
<div id="s2" class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
</div>
</div>
#s2 {
width: 375px;
height: 750px;
background-color: #000;
color: white;
}
#s1 {
width: 375px;
height: 45px;
line-height: 45px;
background-color: #000;
color: white;
border-bottom: 1px solid white;
}
#s1>div {
display: flex;
}
#s1>div>div {
width: auto;
padding: 0 5px;
flex: 0 0 auto;
}
.active {
color: red;
}