javascript - 光滑 slider 多个 slider 保持事件位置

Question

我在一页上有多个光滑 slider 。每个 slider 都有一个缩略图导航。问题是 slider 使用之前的当前位置，而不是从第一个缩略图开始。

我猜我需要一种动态添加 id 的方法，这样它们就不会互相影响。 (我的JS知识很基础)

  $('.slider-products').slick({
   slidesToShow: 1,
   slidesToScroll: 1,
   arrows: false,
   fade: true,
   asNavFor: '.slider-nav'
  });


  var windowWidth = $(window).width();
  if(windowWidth <= 800) {
    $('.slider-nav').slick({
    vertical: false,
    slidesToShow: 4,
    slidesToScroll: 1,
    asNavFor: '.slider-products',
    arrow: false,
    focusOnSelect: true
   });
 } 
 else {
   $('.slider-nav').slick({
   vertical: true,
   slidesToShow: 3,
   slidesToScroll: 1,
   asNavFor: '.slider-products',
   focusOnSelect: true
 });
}

Answer 1

1. 使用the .each method绕过所有 slider 。
2. 为每对 slider 添加一个编号类 the .addClass method .
3. 使用the responsive option根据屏幕宽度更改设置。

请检查结果:https://codepen.io/glebkema/pen/bWRZzB

var numSlick = 0;
$('.slider-products').each( function() {
  numSlick++;
  $(this).addClass( 'slider-' + numSlick ).slick({
    arrows: false,
    asNavFor: '.slider-nav.slider-' + numSlick,
    fade: true,
    slidesToScroll: 1,
    slidesToShow: 1,
  });
});

numSlick = 0;
$('.slider-nav').each( function() {
  numSlick++;
  $(this).addClass( 'slider-' + numSlick ).slick({
    arrow: false,
    asNavFor: '.slider-products.slider-' + numSlick,
    focusOnSelect: true,
    slidesToScroll: 1,
    slidesToShow: 4,
    responsive: [
      {
        breakpoint: 800,
        settings: {
          slidesToShow: 3,
        }
      }
    ]
  });
});

.slick-arrow {
  display: none !important; /* `arrows: false;` is not enough to prevent horizontal scrolling */
}
.slick-slide {
  background: #c69;
  border: 2px solid #fff;
  color: #fff;
  font-size: 36px;
  font-weight: bold;
  outline: none; /* prevent the appearance of a tiny gray contour */
  padding: 18px 0;
  text-align: center;
}
.slider:nth-of-type(n+3) .slick-slide { background: #9c6; }
.slider:nth-of-type(n+5) .slick-slide { background: #69c; }
.slider-nav {
  margin-bottom: 12px;
}
.slider-nav .slick-slide:hover {
  cursor: pointer;
  opacity: .7;
}

<div class="slider slider-products">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

<div class="slider slider-products">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

<div class="slider slider-products">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>
<div class="slider slider-nav">
  <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>
</div>

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>