jquery Slick.js：防止在特定条件下滑向幻灯片

qfe3c7zg 于 2022-11-03 发布在 jQuery

关注(0)|答案(3)|浏览(184)

我正在为我的carousel使用Slick.js，我希望在满足特定条件时防止滑到幻灯片。我正试图通过取消beforeChange事件来实现这一点：

$('.my-slider').on('beforeChange', function(event, slick, currentSlide, nextSlide) {

  if (nextSlide > 3) {
     return false;
  }

});

但是，这并不能防止滑动。
"Slick中有什么方法可以防止滑动吗"
一般情况：点击了“下一页”按钮（或“点”），但幻灯片还没有显示。没有办法处理这个问题吗？

jquery

来源：https://stackoverflow.com/questions/49098030/slick-js-prevent-sliding-to-a-slide-under-a-specific-condition

3条答案

按热度按时间

mbyulnm01#

很遗憾，Slick目前无法处理这种情况。还有一些具有此功能的PR正在等待。请参见此讨论：https://github.com/kenwheeler/slick/pull/2104

赞(0）回复(0）举报 2022-11-03

9fkzdhlc2#

你可以在这个按钮正上方放一个绝对位置的覆盖按钮。2然后在到达这张幻灯片之前，隐藏这个光滑的按钮，并取消隐藏你的覆盖按钮。
那就像这样
.hide {显示：无;}

$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){

    if(nextSlide==4){
        $('.slick-next.slick-arrow').addClass('hide');        
        $('.aboveSlickNext:eq(7)').removeClass('hide');
    }
    else{
        $('.slick-next.slick-arrow').removeClass('hide');       
        $('.aboveSlickNext:eq(7)').addClass('hide');
    }
});

希望这个主意能有所帮助。

赞(0）回复(0）举报 2022-11-03

ukdjmx9f3#

我有一个类似的问题，并解决了它与此功能。

function setSliderFrozen($slider, isFrozen) {
  const allowSlideChange = !isFrozen;

  $slider.slick('slickSetOption', 'accessibility', allowSlideChange);
  $slider.slick('slickSetOption', 'draggable', allowSlideChange);
  $slider.slick('slickSetOption', 'swipe', allowSlideChange);
  $slider.slick('slickSetOption', 'touchMove', allowSlideChange);
}

制作人员：Slick Carousel - Disable controls and interactions by external order

赞(0）回复(0）举报 2022-11-03

我来回答

jquery Slick.js：防止在特定条件下滑向幻灯片

3条答案

相关问题

热门标签

最新问答