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

Slick slider remove last slide if winWidth < 500

本文关键字：如果 幻灯片 winWidth 一张 删除 最后      更新时间：2023-09-26

使用光滑的幻灯片，如果窗口宽度小于 500，我正在尝试删除最后一张幻灯片（幻灯片 6）。

我在这里设置了光滑滑块 - JS小提琴光滑滑块

根据文档，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。

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

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

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

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

另一个想法：如果屏幕尺寸再次更改为更大的尺寸，则幻灯片 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');
});

这有助于我从小/中屏幕尺寸更改为大尺寸，并且仍然拥有所有光滑的div。

相关文章：