我正在尝试使用 asNavFor 选项将页面上的两个 LightSlider 滑块同步在一起,但我无法让它们一起工作。我已按照 LightSlider 网站上的文档进行操作,但我的滑块不同步。
// HTML
<div class="slider1">
<div><img src="image1.jpg" alt="Image 1"></div>
<div><img src="image2.jpg" alt="Image 2"></div>
<div><img src="image3.jpg" alt="Image 3"></div>
</div>
<div class="slider2">
<div><img src="thumb1.jpg" alt="Thumbnail 1"></div>
<div><img src="thumb2.jpg" alt="Thumbnail 2"></div>
<div><img src="thumb3.jpg" alt="Thumbnail 3"></div>
</div>
// JavaScript
$(".slider1").lightSlider({
asNavFor: ".slider2",
item: 1,
loop: true,
slideMargin: 0,
adaptiveHeight: true
});
$(".slider2").lightSlider({
asNavFor: ".slider1",
item: 3,
loop: true,
slideMargin: 0,
adaptiveHeight: true,
vertical: true,
verticalHeight: 80,
vThumbWidth: 50,
thumbItem: 9,
thumbMargin: 4,
slideMargin: 0
});
当我运行这段代码时,两个滑块没有同步在一起。我该如何解决这个问题。有什么办法吗?任何帮助将不胜感激。