Slick carousel'de herhangi bir olay olduğunda tüm videoların yeniden yüklenmesini nasıl önlersiniz?

Question

Kullanıcıların ekleyebileceği, çıkarabileceği ve filtreleyebileceği bir video karesi oluşturmak için Slick carousel eklentisini kullanıyorum. Sahip olduğum sorun, bir kullanıcı bir etkinlik yaptığında (ekleme/kaldırma/filtre), karuseldeki tüm videoların yeniden yüklenmesini sağlar.

slick.js'ye gidip `_. $ SlidesCache = _. $ Slides;` `yorumunu yaptığımda yeniden yükleme işleminin durdurulabileceğini buldum, ancak bu filtreleme işlevini bozuyor Yeniden yüklemeyi engellemenin bir yolu var mı? hala tüm fonksiyonları korurken?

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 bir cevap daha geçici çözüm

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

Daha pasajı: yerine iframe yükleme, bir de youtube thumbnail gösterebilirim <img> etiketi.

Kullanıcı tıkladığında, ilgili iframe'i yükleyin ve videoyu otomatik olarak oynatın. http://jsfiddle.net/eoov2ud1/40/

Düzenleme (ama buna bir oynatılabilir video bazı CSS ile, var olduğunu göstermek için bazı stil gerekiyor) ve aslında sen dışında iframe oluşturabilirsiniz:

Benim için aksak duygu gitti carousel DOM, bundan bağımsız olarak: http://jsfiddle.net/eoov2ud1/48/

Bu nedenle, video filtrelenmiş/gizlenmiş/kaldırılmış olsa bile oynatmaya devam edebilir (bazı ek JS'lerle birlikte) kaldırıldı)