उल्लू कैरोसेल 2 लूप और 1 आइटम के साथ काम नहीं करता है (बग फिक्स्ड अब)

Question

मैं कैरोसेल सामग्री के लिए उल्लू कैरोसेल 2 के साथ काम करता हूं।

जे एस:

$('#owl-demo').owlCarousel({ 
    loop: true, 
    margin: 10, 
    nav: true, 
    items: 1, 
}); 

HTML:

<div id="owl-demo" class="owl-carousel"> 
    <div class="item"><h4>1</h4></div> 
</div> 

समस्या:

मेरे पास है, जब एक सामग्री (गतिशील सामग्री PHP का उपयोग) loop:true और items:1 काम नहीं है और मैं खाली देख लेकिन अगर मैं दो सामग्री जोड़ता हूं उल्लू सच काम किया !!

संपादित करें: मेरी सामग्री गतिशील (1 - ....) है। जब मेरा परिणाम एक सामग्री उल्लू एक समस्या है।

समस्या DEMO

DEMO

कैसे इस समस्या को दूर करते हैं काम किया?

Answer 1

मैं उल्लू डेवलपर समूह को यह बग रिपोर्ट और इस समस्या को ठीक here।

बदलें Commit

view = Math.max(settings.items * 2, 2), 

में इस लाइन अब इस demo

Answer 2

आप .item तत्वों की संख्या की जांच कर सकता से पहले तुम इतनी तरह अपने प्लगइन फोन:

// Be more specific with your selector if .items is used elsewhere on the page. 
var items = $('.items'); 
if(items.length > 1) { 
    $('#owl-demo').owlCarousel({ 
     loop: true, 
     ... 
    }); 
} else { 
    // same as above but with loop: false; 
} 

Answer 3

आप एक बैनर छवि के रूप में owlCarousel में केवल एकल छवि डाल करने के लिए चाहते हैं में काम किया है तो आप उल्लू हिंडोला जे एस में एक तर्क जोड़ सकते हैं।

singleItem: true 

इस तरह:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#main_banner').owlCarousel({ 
      margin: 0, 
      loop: true, 
      navText: [ "<img src='images/leftArrow.png'>", "<img src='images/rightArrow.png'>" ], 
      dots: false, 
      items :1, 
      autoplay: true, 
      singleItem: true 
     }); 
    }); 
    </script> 

Answer 4

मैं इस विधि का इस्तेमाल किया समस्या को हल करने और मुझे लगता है कि यह बहुत आसान है।

var options={ 
    margin: 10, 
    nav: true, 
    items: 1 
    }; 
    if($('#owl-demo .owl-item').length>1){ 
     options.loop=true; 
    } 
    $('#owl-demo').owlCarousel(options); 

Answer 5

मुझे आशा है कि नीचे दी गई विधि आपकी समस्या का समाधान करेगी।
आपको उल्लू कैरोसेल जेएस को संपादित करने की आवश्यकता नहीं है। उसी विधि को बीएक्स स्लाइडर पर भी लागू किया जा सकता है।

$('.owl-demo').owlCarousel({ 
    margin: 0, 
    responsiveClass: true, 
    smartSpeed: 500, 
    dots: ($(".owl-carousel .item").length > 1) ? true: false, 
    loop:($(".owl-carousel .item").length > 1) ? true: false, 
    responsive: { 
     0: { 
      items: 1, 
     }, 
     500: { 
      items: 1, 
     }, 
     768: { 
      items: 1, 
     } 
    } 
}) 

Answer 6

$('#owl-demo').owlCarousel({ loop: true, margin: 10, nav: true, items: 1, responsive:{ 0:{ items:1, nav:true, loop:true }, 600:{ items:1, nav:false, loop:true }, 1000:{ items:1, nav:true, loop:true } } });