Question

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

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

根据文档，slideRemove函数是以下Javascript

>>> f = open('lorem.txt', 'r+')
>>> f.truncate(os.path.getsize('lorem.txt') * 2)
>>> m = mmap.mmap(f.fileno(), 0)
>>> m.size()
1474

我需要帮助将文档中的$('.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--; } });功能更改为500 winWidth。

Answer 1

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

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

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

这里我通过检查noOfslides大于5来删除硬编码的幻灯片6。

你可以看到它在这里工作。 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');
});

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

如果winWidth＆lt;光滑滑块移除最后一张幻灯片500

2 个答案: