फ्लेक्सस्लाइडर स्लाइड चौड़ाई अंक

Question

मुझे flexslider का उपयोग करके एक अजीब समस्या है। स्लाइड LI को सही चौड़ाई नहीं मिलती है ताकि सभी स्लाइड दिखाए जा सकें। यह केवल प्रथम पृष्ठ लोड पर होता है। जैसे ही मैं एक और टैब पर स्विच करता हूं और वापस स्विच करता हूं सब ठीक दिखता है। शायद एक जेएस लोडिंग समस्या ?!

स्क्रीनशॉट: here

flexslider.css

.flexslider {margin: 0; padding: 0;} 
.flexslider .slides > li {text-align: center; display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ 
.flexslider .slides li.flex-active-slide img {text-align:center; width: auto; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); } 

जे एस

$(window).load(function() { 
    $('.flexslider').flexslider({ 
     controlNav: true, 
     directionNav: true 
    }); 
}); 

मैं $ (document) .ready (function() भी, लेकिन अभी भी साथ यह कोशिश की है एक ही समस्या।

कोई विचार?

Answer 1

नीचे यह कोड/आदेश मदद कर सकता है; कम से कम मुझे इसके साथ सफलता मिली है।

<script src="js/jquery-1.8.3.min.js"></script> 
<script src="js/jquery.easing.js"></script> 
<script defer src="js/jquery.flexslider-min.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.flexslider').flexslider({ 
     controlNav: true, 
     directionNav: true, 
    }); 
}); 
</script> 

Answer 2

मुझे एक ही समस्या थी।

एक सत्र में पहले लोड पर, फ्लेक्सस्लाइडर स्लाइडर कंटेनर की चौड़ाई प्राप्त करता है, यदि यह स्पष्ट नहीं है, तो 0px मान है। फिर स्लाइड्स की चौड़ाई 0px है और आप उन्हें नहीं देख सकते हैं।

इस समस्या से बचने के लिए स्लाइडर कंटेनर में एक चौड़ाई तय करने के लिए पर्याप्त है, मेरे मामले 604px में:

<div class="flexslider" style="width: 604px"> 
    <ul class="slides"> 
     <li> 
      <img id="slide1" /> 
     </li> 
     <li> 
      <img id="slide2" /> 
     </li> 
    </ul> 
</div> 

Answer 3

खैर, वर्नर।

मैं आपके समाधान के साथ समाप्त हुआ। दुर्भाग्य से।

यह अन्यथा ऐसा करने का एक और तरीका है।

/* SLIDERS in content */ 
$('.flexslider').flexslider({ 
    animation: "slide", 
    start: function(slider){ 
     $('.flexslider').resize(); 
    } 
}); 

कारण मैं ऊपर कोड विलंब था और एक छोटे से कूद जब स्लाइड सही चौड़ाई के लिए अद्यतन किया जाता है कि उपयोग करने के लिए नहीं चुना है।

अगर किसी के पास क्लीनर समाधान है - कृपया मुझे बताएं। मैं नवीनतम फ्लेक्सस्लाइडर का उपयोग कर रहा हूं - और यह समस्या कभी-कभी होती है। लेकिन जब यह करता है ... arghhh।

Answer 4

मैंने अपने फ्लेक्सस्लाइडर कॉल में minItems को हटाकर इस समस्या का समाधान किया। हालांकि maxItems के साथ काम करने लगता है।

Answer 5

मुझे पता चला कि यह ऐसा क्यों कर रहा था, और यह बहुत आसान है।

यह सीएसएस की वजह से है !!! स्लाइडर में उल पर।

ul.slides

.slides{ 
    padding:0; 
    margin:0; 
} 

पर paddings और मार्जिन दूर ले के बाद मैं इस आकार बदलने सभी ब्राउज़रों और मोबाइल पर हर बार सही काम किया था।

Answer 6

मेरे लिए, समस्या मार्कअप थी।मैं इस किया था:

<div class='carousel-slides'> 
    <div class='carousel-slide'></div> 
    <div class='carousel-slide'></div> 
</div> 

---

$('.carousel-slides', context).flexslider({ 
    selector: '.carousel-slide' 
}); 

... लेकिन ऐसा लग रहा था कि यह प्रत्येक स्लाइड है, जो हास्यास्पद है पर एक आंतरिक div लिए लागू किया जा करने के लिए की जरूरत है।

<div class='carousel-slides'> 
    <div class='carousel-slide'> 
    <div class='carousel-slide-inner'></div> 
    </div> 
    <div class='carousel-slide'> 
    <div class='carousel-slide-inner'></div> 
    </div> 
</div> 

---

$('.carousel-slides', context).flexslider({ 
    selector: '.carousel-slide > .carousel-slide-inner' 
}); 

Answer 7

शायद यह एक और जवाब के लिए थोड़ी देर हो चुकी है, लेकिन यहां सभी जवाब कोशिश कर के बाद और अन्य मंचों में, मैं अपने ही समाधान के साथ समाप्त हो गया है, दूसरों के समान है, लेकिन कम से कम मैं इसे सुंदर सुसंगत और साफ पाएं।

मुझे मोबाइल वातावरण में समस्या थी, जहां स्लाइडर एक टैब के अंदर है जो शीर्षक पर जल्द ही एक क्लिक के रूप में खोला जाता है। सामग्री display:none में थी, और इससे समस्या फ्लेक्सस्लाइडर (v। 2.5) हो जाती है, जो निहित स्लाइड की सही चौड़ाई निर्धारित करने में सक्षम नहीं है।

तो मैंने अपने सीएसएस को सही किया और दृश्यता और अस्पष्टता के साथ playng द्वारा छुपा कंटेनर डाला।

एचटीएमएल sampl

<dd class="tab-container with-slider"> 
    <div class="flexslider"> 
     <ul class="slides"> 
      <li>whatever </li> 
     </ul> 
    </div> 
</dd> 

Css:

/*all other containers behave well with display none/block so I leave them with normal behavior*/ 
.parent dd.tab-container { 
     display: none; position: relative; 
} 
/*container with flexslider inside uses visibility and opacity to be hidden*/ 
.parent dd.tab-container.with-slider{ 
    display: block; 
    height: 0px; 
    visibility: hidden; 
    opacity: 0; 
} 
.parent.accordion-open dd.tab-container.with-slider{ 
    height: auto; 
    visibility: visible; 
    opacity: 1; 
} 

जे एस बुनियादी उदाहरण से straighforward है, और कुछ नहीं।

$j('.myTabOpener').click(function() { 
    var mySlider = $j(this).find('.flexslider'); 
    mySlider.flexslider({ 
     animation: "slide", 
     animationLoop: false, 
     itemWidth: 210, 
     itemMargin: 5, 
     minItems: getGridSize(), 
     maxItems: getGridSize() 
    }); 
});