विंडो आकार बदलने पर फ्लेक्सस्लाइडर 2 आकार बदलना

Question

मैं ट्विटर बूटस्ट्रैप पर निर्मित वर्डप्रेस के लिए एक उत्तरदायी थीम बना रहा हूं। मैं होमपेज पर FlexSlider स्लाइड शो jquery प्लगइन का उपयोग कर रहा हूं।

दुर्भाग्य से, जब मैं अपने ब्राउज़र का आकार बदलता हूं, तो फ्लेक्सस्लाइडर शानदार ढंग से आकार बदलता नहीं है। जब मैं संकुचित हो जाता हूं, तो छवि फसल से उतरने के लिए उत्तरदायी होती है .. यदि मैं व्यापक हो जाता हूं, तो अगली छवि का हिस्सा पक्ष में दिखाई दे सकता है। यह तब भी होता है जब मैं फ्लेक्सस्लाइडर वेबसाइट से डेमो कोड का उपयोग करता हूं। यह फ्लेक्सस्लाइडर डेमो पर भी होता है। लेकिन डैन डचैन की [एनर्जीकृत थीम] [3] व्यूपोर्ट परिवर्तन के रूप में अच्छी तरह से फ्लेक्सस्लाइडर का आकार बदलने का प्रबंधन करती है। क्या कोई यह समझा सकता है कि वह यह कैसे कर रहा है, या किसी भी तरह से मैं अपने संस्करण के व्यवहार में सुधार कर सकता हूं?

धन्यवाद!

Answer 1

आपके पास शायद एक समाधान है या इस चरण में चले गए हैं, लेकिन मैंने सोचा था कि मैं आगंतुकों के लिए जिथब पर इस मुद्दे को इंगित करता हूं: https://github.com/woothemes/FlexSlider/issues/391 (नोट patbouche का जवाब)। यह समाधान मेरे लिए काम किया। मैंने इसे after: कॉलबैक में रखा है।

var slider1 = $('#slider1').data('flexslider'); 
slider1.resize(); 

Answer 2

मुझे लगता है कि यह में कॉलबैक से पहले डाल करने के लिए बेहतर है:

$('.flexslider').flexslider({ 
    // your settings 
    before: function(slider){ 
     $('.flexslider').resize(); 
    } 
}); 

Answer 3

मैं बाध्य करने के लिए खिड़की आदेश में इस मज़बूती से काम कर पाने के लिए घटना का आकार बदलने के लिए किया था। और से पहले FlexSlider के बाद कॉलबैक मेरे लिए काम नहीं किया के बाद से:

$(window).bind('resize', function() { 

setTimeout(function(){ 
    var slider = $('#banner').data('flexslider'); 
    slider.resize(); 
}, 1000); 

}); 

Answer 4

मैं कई तरह से करने की कोशिश की, तो मैं इस

if(jQuery('.iframe').length){ 
    var interval = window.setInterval(function() { jQuery('.flexslider').resize(); }, 100); 

    window.setTimeout(function(){ 
     clearInterval(interval); 
    },4000); 
} 

Answer 5

किया मैं इन समाधानों में से एक जोड़े को संयुक्त और भी यह सुनिश्चित करने के लिए एक चेक जोड़ा गया कि स्लाइडर पहले पृष्ठ पर मौजूद था।

$(function() { 
    var resizeEnd; 
    $(window).on('resize', function() { 
     clearTimeout(resizeEnd); 
     resizeEnd = setTimeout(function() { 
      flexsliderResize(); 
     }, 250); 
    }); 
}); 

function flexsliderResize(){ 
    if ($('.flexslider').length > 0) { 
     $('.flexslider').data('flexslider').resize(); 
    } 
} 

Answer 6

बस अभी भी सामना कर रहा है मामले में किसी को अभी तक एक और विकल्प जोड़ना चाहते थे "flexslider उच्च चौड़ाई के आकार बदलता है, लेकिन कम नहीं" समस्या

उपयोगकर्ता "PCandtheWeb" मामले में नीचे जोड़ने का सुझाव आप एक रैपिंग तालिका, जो दिखाई देता है काम किया जाना है

.your-table 
{ 
    table-layout: fixed 
} 

स्रोत: https://github.com/woothemes/FlexSlider/issues/980

Answer 7

$(window).load(function(){ 
    var mainslider; 

    $('.flexslider').flexslider({ 
     animation: "slide", 
     start: function(slider){ 
      mainslider = slider; 
     } 
    }); 

    //force resize (carousel mode) 
    $(window).on("resize", function() { 
     //carousel resize code, around line 569 of query.flexslider.js 
     mainslider.update(mainslider.pagingCount); 
     mainslider.newSlides.width(mainslider.computedW); 
     mainslider.setProps(mainslider.computedW, "setTotal"); 
    }); 
}); 

मुझे यकीन नहीं है कि यह सभी मामलों के लिए काम करेगा, लेकिन एक साधारण कैरोसेल के लिए यह काम करता है!

Answer 8

मैंने कई तरीकों का भी प्रयास किया है लेकिन वास्तव में कोई भी काम नहीं कर रहा है ... फिर मैंने इसे मैन्युअल रूप से किया, और यह अब काम करता है: स्लाइडर डेटा को फ्लेक्सस्लाइडर द्वारा बदले जाने से पहले सहेजें, जब विंडो आकार बदलती है: flexslider (https://stackoverflow.com/a/16334046/7334422) को नष्ट करें और नोड को पूरी तरह से हटाएं, डेटा में सहेजे गए मूल स्लाइडर नोड को मैन्युअल रूप से जोड़ें, इसे फिर से जोड़ें और flexslider प्रारंभ करें ... क्योंकि यह काफी महंगा है, मैंने आकार बदलने के दौरान निष्पादित नहीं होने के लिए एक आकार बदलने वाली विधि (https://stackoverflow.com/a/40534918/7334422) भी जोड़ा ...हाँ, यह कुछ कोड है और यह एक सा hacky है, लेकिन यह काम कर रहा है :)

$.fn.resized = function (callback, timeout) { 
    $(this).resize(function() { 
     var $this = $(this); 
     if ($this.data('resizeTimeout')) { 
      clearTimeout($this.data('resizeTimeout')); 
     } 
     $this.data('resizeTimeout', setTimeout(callback, timeout)); 
    }); 
}; 

function myFlexInit(slider){ 
    slider.data("originalslider", slider.parent().html()); 
    slider.flexslider({ 
     animation: "slide", 
     //... your options here 
    }); 
} 

$(".flexslider").each(function() { 
    myFlexInit($(this)); 
    }); 

    $(window).resized(function(){ 
     $(".flexslider").each(function() { 
      $(this).removeData("flexslider"); 
      parent = $(this).parent(); 
      originalslider = $(this).data("originalslider"); 
      $(this).remove(); 
      parent.append(originalslider); 
      newslider = parent.children().first(); 
      myFlexInit(newslider); 
     }); 
    }, 200); 

बेहतर होगा कि तुम एक अपना अनूठा कंटेनर में अपने स्लाइडर लपेट:

<div class="sliderparent"> 
    <div class="flexslider"> 
     <ul class="slides"> 

     </ul> 
     </div> 
</div>