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 asNavFor 每次都重置为第一张幻灯片