CODEWITHSUNDEEP
javascriptjquerysliderjquery-ui-slider
Hari Shankar
Hari Shankar

Reputation: 1

How to sync two LightSlider sliders together?

I am trying to sync two LightSlider sliders together on a page using the asNavFor option, but I'm having trouble getting them to work together. I have followed the documentation on the LightSlider website, but my sliders are not syncing.

// 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
});

When I run this code, the two sliders are not syncing together. How can I fix this issue. Is there any way? Any help would be greatly appreciated.

Upvotes: 0

Views: 73

Answers (0)

Related Questions