我的页面上有多个滑块,问题是我创建的自定义箭头只适用于2号滑块,例如,我可以按1号或3号滑块上的箭头,但它会更改2号滑块上的图片。
下面是代码:
**<section id="slideshow">
<div class="slick">
<div><img src="pic.jpg" ></div>
<div><img src="pic2.jpg" ></div>
<div><img src="pic3.jpg"></div>
<div>
<div class="arrow-prev">
<span><i class="fas fa-angle-double-left"></i></span>
</div>
<div class="arrow-next">
<span><i class="fas fa-angle-double-right"></i></span>
</div>
</section>**
<script>
$(document).ready(() => {
$('.slick').slick({
//autoplay: true,
fade: true,
dots: false,
speed: 2000,
autoplaySpeed: 100,
pauseOnHover: true,
arrows: true,
prevArrow: $('.arrow-prev'),
nextArrow: $('.arrow-next')
})
})
</script>
有什么解决这个问题的办法吗?
1条答案
按热度按时间w46czmvw1#
已经一年多了,但是我遇到了这些问题,必须深入挖掘才能找到一个好的答案。
因为这是我做研究时最常想到的问题
在这里,
此解决方案由@Hyzyr提出
它在这个页面上:Slick slider appendArrows to multiple containers, arrows not working except last one
如果您在一个页面中使用多个滑块,则应为此添加额外的脚本。
HTML是这样的