उल्लू कैरोसेल - ऑटो चौड़ाई, अंतिम आइटम स्टैक से बाहर खींचा गया है

Question

मुझे ओडब्ल्यूएल कैरसेल 2 के साथ अजीब समस्या का सामना करना पड़ रहा है। मैं 12 टेबल के लिए सरल कैरोसेल बना रहा हूं, लेकिन विकल्प "ऑटोविड्थ" का उपयोग करते समय, अंतिम तालिका को निकाल दिया जाता है कैरोसेल स्टैक।

DEMO

यदि आप खुले बेला, वहाँ एक साल में हर महीने के लिए हिंडोला है। कैरोसेल के अंत में, कोई दिसंबर नहीं है, लेकिन यदि आप स्रोत कोड की जांच करते हैं, तो आप देख सकते हैं कि दिसंबर वहां है। कुछ कारणों से ओडब्लूएल कैरोसेल प्लगइन दिसंबर को खींच रहा है।

कोई विचार? अग्रिम में, बहुत धन्यवाद!

Answer 1

मैं अभी भी इस मुद्दे में भाग गया। मैंने इसे खराब तरीके से तय किया, लेकिन यह काम कर रहा है। दोनों ब्राउज़रों में। समस्या owl-stage तत्व के साथ थी। उल्लू कैरोसेल lib ने चौड़ाई की संपत्ति की गणना की, लेकिन आइटम रैपर में फिट नहीं होते हैं। तो मुझे init ईवेंट के बाद एक फ़ंक्शन कॉल करना होगा और इसमें 100px जोड़ें। मैं इस .Very बुरा दृष्टिकोण मुझे पता है के साथ setTimeout सुविधा का इस्तेमाल किया, लेकिन मेरी परियोजना में हो रहा js कार्यों का एक बहुत देखते हैं और नहीं allways सही width संपत्ति (कभी कभी मैं undefined प्राप्त)

तो कोड है मिलती है:

$('.owl-carousel').owlCarousel({ 
     margin:90, 
     nav:true, 
     dots:true, 
     autoWidth:true, 
     afterInit: setWidth() 
    }); 

    function setWidth(){ 
     setTimeout(function(){ 
      var carWidth = $('.owl-stage').width() + 100; 
      $('.owl-stage').width(carWidth); 
     },200); 

    } 

मैं इसे setTimeout बिना काम कर सकता था यकीन है, लेकिन समय सीमा (* इसके लिए बुरा लग रहा) इंतजार नहीं कर सकता।

उम्मीद है कि यह मदद करता है!

Answer 2

.owl-stage कक्षा के लिए केवल सीएसएस में फ्लेक्स प्रदर्शित करें और छोटे उपकरणों के लिए जेएस फ़ंक्शन भी जोड़ें।

सीएसएस

.owl-stage{display:flex} 

जे एस

$('.owl-carousel').owlCarousel({ 
    loop: false, 
    autoWidth:true, 
    margin:10, 
    nav:true, 
    responsive:{ 
    0:{ 
    items:1, 
    autoWidth:false 
    }, 
    768:{ 
    items:3 
    } 
    } 
});