如何将 Flickity JS 用于具有相同点击事件的两个容器?
How can I use Flickity JS for two containers with same click events?
我有一个简单的 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
});
我会得到两个滑块,但我想要一个带有一对导航箭头和一页点以及相同事件的滑块。
因此,当我单击或拖动导航时,两个容器都应该有动画。
我应该怎么办?
你能帮我吗?
提前致谢。
我已使用 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>
我有一个简单的 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
});
我会得到两个滑块,但我想要一个带有一对导航箭头和一页点以及相同事件的滑块。 因此,当我单击或拖动导航时,两个容器都应该有动画。 我应该怎么办? 你能帮我吗? 提前致谢。
我已使用 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>