बूटस्ट्रैप कैरोसेल:

Question

स्लाइडिंग करते समय div से बाहर छवियां मुझे एक समस्या है जिसे मैं समझ नहीं सकता। मैं बूटस्ट्रैप के कैरोसेल का उपयोग कर रहा हूं और सब कुछ संक्रमण के अलावा ठीक काम करता है: स्लाइडिंग संक्रमण शुरू होने पर पिछली वस्तुएं मेरे कैरोसेल डिवीजन से बाहर दिखाई देती हैं और पिछली सक्रिय वस्तुएं मेरे कैरोसेल div से बाहर निकलती हैं क्योंकि उन्हें मेरे अगले आइटम द्वारा प्रतिस्थापित किया जा रहा है।

<div id="myCarousel" class="carousel slide span6"> 
    <div id="carousel-inner"> 
      <div class="active item"> 
       <img src="img/abstract-landscape-paintings-bursting-sun.jpg" /> 
      </div> 
      <div class="item"> 
        <img src="img/charnwood_forest_landscape.jpg" /> 
      </div> 
     </div> 
     <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
     <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 
</div> 

मैं केवल हिंडोला स्क्रिप्ट का उपयोग कर रहा हूँ:

यहाँ मेरी html कोड है

$(document).ready(function() { 
    $(".carousel").carousel({ 
     interval: 5000, 
     pause: "hover", 
    }); 
}); 

यहाँ तो आप अपने पूरे कोड की जांच कर सकते मेरी समस्या का एक उदाहरण के लिए एक लिंक है: http://todoapp.nfshost.com/slide

कोई भी जो देख सकता है कि समस्या क्या है?

धन्यवाद!

Answer 1

<div id="myCarousel" class="carousel slide span6" style="overflow:hidden"> 
<div id="carousel-inner"> 
     <div class="active item"> 
      <img src="img/abstract-landscape-paintings-bursting-sun.jpg" /> 
     </div> 
     <div class="item"> 
       <img src="img/charnwood_forest_landscape.jpg" /> 
     </div> 
    </div> 
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a> 

अरे दोस्त अतिप्रवाह myCarousel आईडी में छिपा जोड़ें।

Answer 2

आप अपने सीएसएस में इस जोड़ सकते हैं:

.carousel { overflow: hidden; } 

और

.item { overflow: hidden: } 

Answer 3

बस छवियों

img { 
    width: 100%; 
} 

Answer 4

मैं 'अतिप्रवाह सेट करने के लिए कादेर के समाधान की कोशिश की करने के लिए width:100%; जोड़ें: छिपा हुआ ', लेकिन किसी कारण से केवल बड़ी स्क्रीन पर काम किया। Div के बाहर ओवरफ्लो अभी भी छोटी स्क्रीन पर दिखाई दिया।

अंत में, यहाँ स्टाइल मैं पेज के शीर्ष करने के लिए जोड़ा इस समस्या को हल करने के लिए है:

.carousel-inner > .next { 
    display: none; 
} 
.carousel-inner > .prev { 
    display: none; 
} 

भेजे छवि .next या .prev वर्ग संक्रमण के दौरान इससे जुड़ा है। इस तत्व को छिपाने से यह ओवरफ्लो समस्या को रोकता है।

शायद एक और अधिक सुरुचिपूर्ण समाधान है, लेकिन यह त्वरित, आसान और प्रभावी था।