उल्लू कैरोसेल - चौड़ाई की गणना गलत है

Question

मेरे पास तीन उत्तरदायी आइटम (आईएमजीएस) हैं, लेकिन हर बार उल्लू-कैरोसेल लोड होता है, उल्लू-रैपर चौड़ाई सभी छवियों के आकार के साथ दो बार होती है। उदाहरण के लिए; अगर छवियों को पूर्ण करने में 1583 पीएक्स लगता है, उल्लू-रैपर 1583 * 3 * 2 = 9 4 9 8 पीएक्स लेता है, और सभी साइट इस चौड़ाई को लेती है, इसके बजाय पूर्ण आकार (1583 पीएक्स)।

मुद्दा: http://nacionalempreendimen.web2144.uni5.net

एचटीएमएल

<div id="promoted-carousel"> 
    <div class="item"><img src="assets/img/tmp/1.jpg"></div> 
    <div class="item"><img src="assets/img/tmp/2.jpg"></div> 
    <div class="item"><img src="assets/img/tmp/3.jpg"></div> 
</div> 

सीएसएस

#promoted-carousel .item img{ 
    display: block; 
    width: 100%; 
    height: auto; 
} 

जे एस

$('#promoted-carousel').owlCarousel({ 
    autoPlay: 5000, 
    stopOnHover: true, 
    singleItem: true 
}); 

अद्यतन

मैंने देखा कि जब मैं .page-wrapper div से बाहर #promoted-carousel div शब्दों में कहें, यह ठीक से काम करता है। लेकिन सीएसएस का मेरा ज्ञान यह समझने के लिए पर्याप्त नहीं है कि यह क्यों काम करता है।

Answer 1

यह समस्या एक ज्ञात मुद्दा है। आपको टेबल पर table-layout: fixed डालना होगा।

https://github.com/OwlFonk/OwlCarousel/issues/274

Answer 2

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

मैं फिर भीतरी रैपर पर उल्लू कैरोसेल कहता हूं और मुझे आमतौर पर बहुत कम समस्याएं होती हैं

<div id="promoted-carousel-outer"> 
    <div id="promoted-carousel"> 
     <div class="item"><img src="assets/img/tmp/1.jpg"></div> 
     <div class="item"><img src="assets/img/tmp/2.jpg"></div> 
     <div class="item"><img src="assets/img/tmp/3.jpg"></div> 
    </div> 
</div> 

Answer 3

अविश्वसनीय रूप से, मुझे संदेह है कि यह उल्लू कैरोसेल के भीतर एक बग हो सकता है।

appendWrapperSizes : function() { 
     var base = this, 
      width = base.$owlItems.length * base.itemWidth; 

     base.$owlWrapper.css({ 
      "width": width,//Comment out this part=> * 2, 
      "left": 0 
     }); 
     base.appendItemsSizes(); 
    }, 

यह owlCarousel 1.3.3 के लिए काम किया:

मुझे दूर करने गया था * 2appendWrapperSizes में क्या मदद की।

Answer 4

यह मुझे मदद मिली:

setTimeout(function() { 
    $('#promoted-carousel').owlCarousel({ 
     autoPlay: 5000, 
     stopOnHover: true, 
     singleItem: true 
    }); 
}, 10);