Slick.js:如何删除当前幻灯片?

Posted

技术标签:

【中文标题】Slick.js:如何删除当前幻灯片?【英文标题】:Slick.js: How to remove current slide? 【发布时间】:2015-06-09 18:01:07 【问题描述】:

使用Slick.js - 我如何删除当前的活动幻灯片?我做了一个例子,但没有任何效果

var $status = $('.pagingInfo');
var $slickElement = $('.slideshow');

$slickElement.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) 
    //currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
    var i = (currentSlide ? currentSlide : 0) + 1;
    $status.text(i + '/' + slick.slideCount);
);

$slickElement.slick(
    slide: 'img',
    speed: 1,
    infinite: false,
    swipe: false,
    autoplay: false,
    dots: false
);

$('.remove-slide').on('click', function() 
    $slickElement.slick('slickRemove', i);
);

我的小提琴在这里 - http://jsfiddle.net/q5yae1t3/9/

【问题讨论】:

【参考方案1】:

您没有在$(...).on(...) 函数中设置i 变量。您需要设置i 才能删除基于i 的内容。然后,您还需要更改所有 data-slick-index 属性,因为幻灯片计数器更改时这些属性并没有更改。

$('.remove-slide').on('click', function() 
   i = $("img.slick-active").attr("data-slick-index");
   $slickElement.slick('slickRemove', i);
   var j = 0;
   $("img.slick-slide").each(function()
     $(this).attr("data-slick-index",j);
     j++;
   );
);

http://jsfiddle.net/q5yae1t3/19/ 希望对您有所帮助!

【讨论】:

帮助了我。我删除了无限循环并且它起作用了。但是,当无限循环处于活动状态时,您知道在删除幻灯片后重建“data-slick-index”的简单方法吗? 发现.slick('refresh')。见github【参考方案2】:

这是一个单行。

var currentSlide = $('.slideshow').slick('slickCurrentSlide');
$('.slideshow').slick('slickRemove', currentSlide);

【讨论】:

以上是关于Slick.js:如何删除当前幻灯片?的主要内容,如果未能解决你的问题,请参考以下文章

使用 slick.js 在刷新时记住上次查看的幻灯片

Slick.Js asNavFor 每次都重置为第一张幻灯片

Slick.js:滑动滑块未正确拖动(快速回到第一张幻灯片)

text 如何删除所有幻灯片内容但使用VBA删除其标题?

text 如何根据标题内容自动删除幻灯片?

text 如何根据幻灯片的布局或内容删除幻灯片?