स्लिम कैरोसेल पर कोई भी घटना होने पर आप सभी वीडियो को पुनः लोड करने से कैसे रोकते हैं?

Question

मैं उन वीडियो के कैरोसेल बनाने के लिए स्लिम कैरोसेल प्लगइन का उपयोग कर रहा हूं जो उपयोगकर्ता जोड़ सकते हैं, हटा सकते हैं और फ़िल्टर कर सकते हैं। मुझे जो समस्या मिली है वह यह है कि जब भी कोई उपयोगकर्ता कैरोसेल रीलोड पर सभी वीडियो करता है (जोड़/हटा/फ़िल्टर) करता है, जो एक घबराहट महसूस करता है।

मुझे पता चला कि अगर मैं slick.js में जाता हूं तो पुनः लोडिंग रोक दी जा सकती है और `_। $ SlideCache = _। $ स्लाइड्स; '` पर टिप्पणी करता है, लेकिन यह फ़िल्टरिंग फ़ंक्शन को तोड़ देता है क्या पुनः लोड करने से रोकने का कोई तरीका है जबकि अभी भी सभी कार्यों को संरक्षित करते हैं?

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

जावास्क्रिप्ट

$(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 thumbnail दिखा सकता है <img> टैग।

जब उपयोगकर्ता उस पर क्लिक करता है, तो संबंधित आईफ्रेम लोड करें और वीडियो को ऑटोप्ले करें।

मेरे लिए भद्दा लग रहा है चला गया है: http://jsfiddle.net/eoov2ud1/40/

संपादित (लेकिन यह कुछ स्टाइल है कि यह एक बजाने वीडियो है, कुछ सीएसएस के साथ दिखाने के लिए की जरूरत है) और वास्तव में, आप में से बाहर आइफ्रेम बना सकते हैं कैरोसेल डोम, ताकि यह इससे स्वतंत्र हो: http://jsfiddle.net/eoov2ud1/48/

इसलिए यह वीडियो जारी/छुपा/हटाया गया है (भले ही वीडियो को फ़िल्टर/छुपा/हटाया गया हो), आप वीडियो को तब भी रोक सकते हैं जब आप यह पता लगा सकें कि यह था हटा दिया गया)