Как предотвратить повторную загрузку всех видео при возникновении какого-либо события на карусели Slick?

Question

Я использую плагин Slick Carousel для создания карусели видео, которую пользователи могут добавлять, удалять и фильтровать. У меня проблема в том, что всякий раз, когда пользователь делает событие (добавляет / удаляет / фильтрует), все видео на карусели перезагружаются, что дает неуклюжее ощущение.

Я обнаружил, что перезагрузка может быть остановлена, если я зайду в slick.js и закомментирую `_.$ SlidesCache = _.$ Slides;``, но это нарушает функцию фильтрации Есть ли способ предотвратить перезагрузку при сохранении всех функций?

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

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

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();
};

Answer 1

Это скорее обходной путь, чем ответ: вместо загрузки iframe можно отобразить миниатюру YouTube в <img> тег.

Когда пользователь нажимает на него, загружает соответствующий iframe и автоматически воспроизводит видео.

Для меня неуклюжее чувство исчезло: http://jsfiddle.net/eoov2ud1/40/(но ему нужно немного стиля, чтобы показать, что это воспроизводимое видео с небольшим количеством CSS)

Отредактируйте и фактически вы можете создать iframe вне DOM карусели, чтобы он стал независимым от него: http://jsfiddle.net/eoov2ud1/48/

Следовательно, оно может продолжить воспроизведение, даже если видео отфильтровано / скрыто / удалено (с помощью некоторого дополнительного JS вы также можете остановить видео, когда обнаружите, что оно было удалено)