如何将两个 LightSlider 滑块同步在一起?

问题描述 投票:0回答:0

我正在尝试使用 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
});

当我运行这段代码时,两个滑块没有同步在一起。我该如何解决这个问题。有什么办法吗?任何帮助将不胜感激。

javascript jquery slider jquery-ui-slider
© www.soinside.com 2019 - 2024. All rights reserved.