如何将 Flickity JS 用于具有相同点击事件的两个容器?

Question

我有一个简单的div，其中我有两个带有图像和一些文本的容器：

<div class="wrapper">
<div class="img-container">
<div class="slide-img">
<img src="img/bg1.jpg" alt="">
</div>
<div class="slide-img">
<img src="img/bg1.jpg" alt="">
</div>
</div>
<div class="text-container">
<div class="slide-text">
<p>1</p>
</div>
<div class="slide-text">
<p>2</p>
</div>
</div>
</div>

现在我想用Flickity js定位容器， 因此，如果我这样做：

$('.img-container').flickity({
cellAlign: 'left',
contain: true
});
$('.text-container').flickity({
cellAlign: 'left',
contain: true
});

我会得到两个滑块，但我想要一个带有一对导航箭头和一个页面点和相同事件的滑块。 因此，当我单击或拖动导航时，两个容器都应该动画化。 我该怎么办？ 你能帮帮我吗？ 提前谢谢。

Answer 1

我使用了asNavFor选项来触发img-container滑块

$('.img-container').flickity();
// 2nd carousel, navigation
$('.text-container').flickity({
asNavFor: '.img-container',
contain: true,
pageDots: false,
prevNextButtons: false
});

.carousel {
background: #FAFAFA;
margin-bottom: 40px;
}
.slide-img {
width: 100%;
height: 200px;
margin-right: 10px;
background: tomato;
border-radius: 5px;
}
.text-container .slide-text {
height: 80px;
width: 100px;
background: tomato;
text-align:center;
font-size:20px;
}
.slide-text.is-nav-selected {
background: #ED2;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/2.2.1/flickity.pkgd.min.js"></script>
<div class="wrapper">
<div class="img-container carousel">
<div class="slide-img">
<img src="img/bg1.jpg" alt="">
</div>
<div class="slide-img">
<img src="img/bg1.jpg" alt="">
</div>
</div>
<div class="text-container carousel">
<div class="slide-text">
<p>1</p>
</div>
<div class="slide-text">
<p>2</p>
</div>
</div>
</div>