如果 winWidth < 500，则光滑的滑块会删除最后一张幻灯片

Question

使用 slick slide，如果 window 宽度小于 500，我将尝试删除最后一张幻灯片（幻灯片 6）。

我在这里设置了灵活的滑块 - JS Fiddle Slick Slider

根据文档，slideRemove函数如下Javascript

$('.add-remove').slick({
  slidesToShow: 3,
  slidesToScroll: 3
});
$('.js-add-slide').on('click', function() {
  slideIndex++;
$('.add-remove').slick('slickAdd','<div><h3>' + slideIndex + '</h3></div>');
});

$('.js-remove-slide').on('click', function() {
$('.add-remove').slick('slickRemove',slideIndex - 1);
 if (slideIndex !== 0){
 slideIndex--;
}
});

我需要帮助将文档中的 .on('click') 函数更改为 500 winWidth。

Answer 1

您需要 2 个事件，一个是 window 调整大小，一个是加载。还定义一个变量来存储幻灯片的数量。

$(window).resize(function(evt){

    if($(document).width()<500 && noOfSlides > 5)
    {
      alert($( document ).width());
      $('.slider').slick('slickRemove',5);
   }
});

这里我硬编码了要删除的幻灯片 6，并检查 noOfslides 是否大于 5。

你可以看到它在这里工作。 https://jsfiddle.net/g7z93ur6/

Answer 2

另一个想法：如果再次将屏幕尺寸更改为更大的尺寸，幻灯片 6 仍然不存在（因为它之前已被删除）。您可以使用巧妙的过滤器（例如“:even”或“:last-of-element”）：

function checkSizeAndFilterSlickDivs(elementId){
            if($(document).width()<500)
            {
                $(elementId).slick('slickFilter',':even');
            }
            else {
                $(elementId).slick('slickUnfilter');
            }
        }
checkSizeAndFilterSlickDivs('.add-remove');
                        $(window).resize(function(){
                            checkSizeAndFilterSlickDivs('#offer-' + idOfElement + '-div');
});

这帮助我从 small/medium 屏幕尺寸更改为大尺寸，并且仍然可以使用所有光滑的 div。

如果 winWidth < 500，则光滑的滑块会删除最后一张幻灯片

Slick slider remove last slide if winWidth < 500

javascript

jquery

slick.js