如果在Slick轮播上发生任何事件，您如何防止所有视频重新加载？

I'm using the Slick carousel plugin to create a carousel of videos that users can add to, remove from, and filter. The problem I've got is that whenever a user does an event (add/remove/filter), all of the videos on the carousel reload, which gives a clunky feeling.

我正在使用Slick carousel插件创建一个视频轮播，用户可以添加，删除和过滤。我遇到的问题是，每当用户做一个事件（添加/删除/过滤）时，旋转木马上的所有视频都会重新加载，这给人一种笨重的感觉。

I found that the reloading can be stopped if I go into slick.js and comment out `_.$slidesCache = _.$slides;``, but that breaks the Filtering function Is there a way to prevent reloading while still preserving all functions?

我发现重新加载可以停止，如果我进入slick.js并注释掉`_。$ slidesCache = _。$ slides;``，但这会破坏Filtering函数是否有办法防止重新加载，同时仍然保留所有函数？

JSFiddle: http://jsfiddle.net/neowot/eoov2ud1/37/

JSFiddle：http：//jsfiddle.net/neowot/eoov2ud1/37/

Javascript

使用Javascript

$(document).ready(function(){
    var slideId = 0;
    var slides = [];
    $('.add-remove').slick({
        slidesToShow: 3,
        slidesToScroll: 3
    });

    var target = '<div class="videowrapper"><iframe src="https://www.youtube.com/embed/7WgYmnwO-Pw" frameborder="0" allowfullscreen></iframe></div>';

    $('.js-add-FirstClass-slide').on('click', function() {        
        $('.add-remove').slick('slickAdd','<div class="FirstClass"  slide-id="' + slideId + '"><h3><a class="sliderX">X</a>' + target + '</h3></div>');
        slides.push(slideId);
        slideId++;
    });

    $('.js-add-SecondClass-slide').on('click', function() {
        $('.add-remove').slick('slickAdd','<div class="SecondClass" slide-id="' + slideId + '"><h3><a class="sliderX">X</a>' + target + '</h3></div>');
        slides.push(slideId);
        slideId++;
    });

    var filtered = false;

    $('.ToggleFirstClass').on('click', function() {
        if (filtered === false) {
            $('.add-remove').slick('slickFilter', $('.FirstClass')); 
            filtered = true;
        } else {
            $('.add-remove').slick('slickUnfilter');
            filtered = false;
        }
    });

    $('.ToggleSecondClass').on('click', function() {
        if (filtered === false) {
            $('.add-remove').slick('slickFilter','.SecondClass'); 
            filtered = true;
        } else {
            $('.add-remove').slick('slickUnfilter');
            filtered = false;
        }
    });

    $('body').on('click', '.sliderX', function() {
        var id = parseInt($(this).closest("div").attr("slide-id"), 0);
        var index = slides.indexOf(id);
        $('.add-remove').slick('slickRemove', index);
        slides.splice(index, 1);
    });
});

slick.JS snippet

slick.JS片段

Slick.prototype.addSlide = Slick.prototype.slickAdd = function(markup, index, addBefore) {
    var _ = this;

    if (typeof(index) === 'boolean') {
        addBefore = index;
        index = null;
    } else if (index < 0 || (index >= _.slideCount)) {
        return false;
    }

    _.unload();

    if (typeof(index) === 'number') {
        if (index === 0 && _.$slides.length === 0) {
            $(markup).appendTo(_.$slideTrack);
        } else if (addBefore) {
            $(markup).insertBefore(_.$slides.eq(index));
        } else {
            $(markup).insertAfter(_.$slides.eq(index));
        }
        } else {
        if (addBefore === true) {
            $(markup).prependTo(_.$slideTrack);
        } else {
            $(markup).appendTo(_.$slideTrack);
        }
    }

    _.$slides = _.$slideTrack.children(this.options.slide);

    _.$slideTrack.children(this.options.slide).detach();

    _.$slideTrack.append(_.$slides);

    _.$slides.each(function(index, element) {
        $(element).attr('data-slick-index', index);
    });

    _.$slidesCache = _.$slides;

    _.reinit();
};

1 个解决方案

#1

More a workaround than an answer: instead of loading the iframe, you could show the youtube thumbnail in an <img> tag.

更多解决方法而不是答案：您可以在如果在Slick轮播上发生任何事件，您如何防止所有视频重新加载？标记中显示youtube缩略图，而不是加载iframe。

When the user click on it, load the related iframe and autoplay the video.

当用户点击它时，加载相关的iframe并自动播放视频。

For me the clunky feeling is gone: http://jsfiddle.net/eoov2ud1/40/ (but it needs some styling to show that it's a playable video, with some CSS)

对我来说，笨重的感觉消失了：http：//jsfiddle.net/eoov2ud1/40/（但它需要一些样式来表明它是一个可玩的视频，有一些CSS）

Edit and actually, you can create the iframe outside of the carousel DOM, so that it becomes independent from it: http://jsfiddle.net/eoov2ud1/48/

编辑，实际上，您可以在轮播DOM之外创建iframe，以便它独立于它：http：//jsfiddle.net/eoov2ud1/48/

Hence it could continue playing, even if the video is filtered/hidden/removed (with some additional JS, you can also stop the video when you detect that it was removed)

因此它可以继续播放，即使视频被过滤/隐藏/删除（使用一些额外的JS，您也可以在检测到视频被删除时停止播放）

#1