Question

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

我猜我需要一种动态添加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

使用the .each method绕过所有滑块。
按the .addClass method为每对滑块添加编号的类。
使用the responsive option根据屏幕宽度更改设置。

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

＆＃13;

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,
        }
      }
    ]
  });
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

光滑滑块多个滑块保持活动位置

1 个答案: