滑溜的残疾人类在下一个箭头

Question

我有以下两个滑块，其中第二个滑块是第一个滑块的缩略图导航，一切都很好，除了下一个箭头上的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

您可以考虑事件，并在每次更改以应用类时进行测试：

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