下一个箭头上的光滑禁用类

Question

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

从演示中可以看出，当滑块停止滑动时，该类被添加到底部导航滑块的下一步按钮中——即使您仍然可以单击下一步按钮继续滑动顶部的主滑块

有没有办法只在顶部滑块到达最后一张幻灯片时才禁用此功能？

$(".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 并在每次更改以应用该类时进行测试：

$('.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>