下一个箭头上的 slick 已禁用 class

Question

我有以下 2 个滑块，其中第二个滑块是第一个滑块的缩略图导航，一切正常，除了下一个箭头上的 slick-disabled class

正如您从演示中看到的那样，当滑块停止滑动时，class 被添加到底部导航滑块下一个按钮 - 即使您仍然可以单击下一个按钮继续滑动顶部主滑块

有没有办法让它仅在顶部滑块到达最后一张幻灯片时禁用？

$(".single-item").slick({
  infinite:false,
  asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
  infinite:false,
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.single-item',
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css');

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

.slick-disabled {
  cursor: not-allowed;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class='container'>
  <div class='single-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
  <div class='navigation-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
</div>

Answer 1

您可以考虑 the events 并在每次进行更改时进行测试以应用 class:

$('.single-item,.navigation-item').on('init', function(event){
   if($('.single-item .slick-prev').attr('aria-disabled')=="true" &&
      $('.navigation-item .slick-prev').attr('aria-disabled')=="true") {
          $('.slick-prev').addClass('disabled');
      }
    else {
          $('.slick-prev').removeClass('disabled');
    }
    
    if($('.single-item .slick-next').attr('aria-disabled')=="true" &&
      $('.navigation-item .slick-next').attr('aria-disabled')=="true") {
          $('.slick-next').addClass('disabled');
      }
    else {
          $('.slick-next').removeClass('disabled');
    }
}
);

$(".single-item").slick({
  infinite:false,
  asNavFor: '.navigation-item',
});
$(".navigation-item").slick({
  infinite:false,
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.single-item',
});

$('.single-item,.navigation-item').on('afterChange', function(event){
   if($('.single-item .slick-prev').attr('aria-disabled')=="true" &&
      $('.navigation-item .slick-prev').attr('aria-disabled')=="true") {
          $('.slick-prev').addClass('disabled');
      }
    else {
          $('.slick-prev').removeClass('disabled');
    }
    
    if($('.single-item .slick-next').attr('aria-disabled')=="true" &&
      $('.navigation-item .slick-next').attr('aria-disabled')=="true") {
          $('.slick-next').addClass('disabled');
      }
    else {
          $('.slick-next').removeClass('disabled');
    }
});

@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick-theme.min.css');
@import url('https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.css');

.container {
  margin: 0 auto;
  padding: 40px;
  width: 80%;
  color: #333;
  background: #419be0;
}

.slick-slide {
  text-align: center;
  color: #419be0;
  background: white;
}

.disabled {
  cursor: not-allowed;
}
.slick-next:not(.disabled):before, 
.slick-prev:not(.disabled):before {
  opacity:1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.5.9/slick.min.js"></script>
<div class='container'>
  <div class='single-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
  <div class='navigation-item'>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </div>
</div>

下一个箭头上的 slick 已禁用 class

slick disabled class on next arrow

css

jquery

slick.js