अपडेट किया गया 2019 ...
बूटस्ट्रैप ४
हिंडोला 4.x में बदल गया है, और मल्टी-स्लाइड एनीमेशन बदलाव इस तरह से ओवरराइड किए जा सकते हैं ...
.carousel-inner .carousel-item-right.active,
.carousel-inner .carousel-item-next {
transform: translateX(33.33%);
}
.carousel-inner .carousel-item-left.active,
.carousel-inner .carousel-item-prev {
transform: translateX(-33.33%)
}
.carousel-inner .carousel-item-right,
.carousel-inner .carousel-item-left{
transform: translateX(0);
}
बूटस्ट्रैप 4 अल्फा.6 डेमो
बूटस्ट्रैप 4.0.0 (शो 4, एक बार में 1 एडवांस)
बूटस्ट्रैप 4.1.0 ( एक बार में 3, अग्रिम 1)
बूटस्ट्रैप 4.1.0 (एक बार में सभी 4 अग्रिम)
बूटस्ट्रैप 4.3.1 उत्तरदायी (शो कई, अग्रिम 1) new
कार्ड के साथ बूटस्ट्रैप 4.3.1 हिंडोलाnew
एक अन्य विकल्प एक उत्तरदायी हिंडोला है जो केवल छोटी स्क्रीन पर 1 स्लाइड दिखाता है और अग्रिम करता है , लेकिन दिखाता है कि कई स्लाइड बड़ी स्क्रीन हैं । पिछले उदाहरण की तरह स्लाइड्स को क्लोन करने के बजाय, यह सीएसएस को समायोजित करता है और निरंतर साइकिल चालन के लिए अनुमति देने के लिए अतिरिक्त स्लाइड को स्थानांतरित करने के लिए jQuery का उपयोग करता है (चारों ओर लपेटें):
कृपया इस कोड को कॉपी-पेस्ट न करें। सबसे पहले, समझें कि यह कैसे काम करता है।
बूटस्ट्रैप 4 उत्तरदायी (शो 3, मोबाइल पर 1 स्लाइड)
@media (min-width: 768px) {
/* show 3 items */
.carousel-inner .active,
.carousel-inner .active + .carousel-item,
.carousel-inner .active + .carousel-item + .carousel-item {
display: block;
}
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item,
.carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
transition: none;
}
.carousel-inner .carousel-item-next,
.carousel-inner .carousel-item-prev {
position: relative;
transform: translate3d(0, 0, 0);
}
.carousel-inner .active.carousel-item + .carousel-item + .carousel-item + .carousel-item {
position: absolute;
top: 0;
right: -33.3333%;
z-index: -1;
display: block;
visibility: visible;
}
/* left or forward direction */
.active.carousel-item-left + .carousel-item-next.carousel-item-left,
.carousel-item-next.carousel-item-left + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item,
.carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(-100%, 0, 0);
visibility: visible;
}
/* farthest right hidden item must be abso position for animations */
.carousel-inner .carousel-item-prev.carousel-item-right {
position: absolute;
top: 0;
left: 0;
z-index: -1;
display: block;
visibility: visible;
}
/* right or prev direction */
.active.carousel-item-right + .carousel-item-prev.carousel-item-right,
.carousel-item-prev.carousel-item-right + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item,
.carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
position: relative;
transform: translate3d(100%, 0, 0);
visibility: visible;
display: block;
visibility: visible;
}
}
<div class="container-fluid">
<div id="carouselExample" class="carousel slide" data-ride="carousel" data-interval="9000">
<div class="carousel-inner row w-100 mx-auto" role="listbox">
<div class="carousel-item col-md-4 active">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400/000/fff?text=1" alt="slide 1">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=2" alt="slide 2">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=3" alt="slide 3">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=4" alt="slide 4">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=5" alt="slide 5">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=6" alt="slide 6">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=7" alt="slide 7">
</div>
<div class="carousel-item col-md-4">
<img class="img-fluid mx-auto d-block" src="//placehold.it/600x400?text=8" alt="slide 7">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<i class="fa fa-chevron-left fa-lg text-muted"></i>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next text-faded" href="#carouselExample" role="button" data-slide="next">
<i class="fa fa-chevron-right fa-lg text-muted"></i>
<span class="sr-only">Next</span>
</a>
</div>
</div>
उदाहरण - बूटस्ट्रैप 4 उत्तरदायी (मोबाइल पर 4, 1 स्लाइड)
उदाहरण - बूटस्ट्रैप 4 उत्तरदायी (शो 5, मोबाइल पर 1 स्लाइड)
बूटस्ट्रैप ३
यहां बूटप्ले पर एक 3.x उदाहरण दिया गया है: http://bootply.com/89193
आपको आइटम की एक पूरी पंक्ति को आइटम में सक्रिय करने की आवश्यकता है। यहां एक और संस्करण है जो छोटी स्क्रीन की चौड़ाई पर छवियों को स्टैक नहीं करता है: http://bootply.com/92514
एक समय में एक स्लाइड अग्रिम करने के लिए EDIT वैकल्पिक दृष्टिकोण :
अगले आइटम क्लोन करने के लिए jQuery का उपयोग करें ..
$('.carousel .item').each(function(){
var next = $(this).next();
if (!next.length) {
next = $(this).siblings(':first');
}
next.children(':first-child').clone().appendTo($(this));
if (next.next().length>0) {
next.next().children(':first-child').clone().appendTo($(this));
}
else {
$(this).siblings(':first').children(':first-child').clone().appendTo($(this));
}
});
और फिर सीएसएस तदनुसार स्थिति ...
३.३.१ से पहले
.carousel-inner .active.left { left: -33%; }
.carousel-inner .next { left: 33%; }
३.३.१ के बाद
.carousel-inner .item.left.active {
transform: translateX(-33%);
}
.carousel-inner .item.right.active {
transform: translateX(33%);
}
.carousel-inner .item.next {
transform: translateX(33%)
}
.carousel-inner .item.prev {
transform: translateX(-33%)
}
.carousel-inner .item.right,
.carousel-inner .item.left {
transform: translateX(0);
}
यह समय पर 3 दिखाएगा, लेकिन केवल एक बार स्लाइड करें :
बूटस्ट्रैप 3.x डेमो
कृपया इस कोड को कॉपी-पेस्ट न करें। सबसे पहले, समझें कि यह कैसे काम करता है। यह उत्तर यहां आपको सीखने में मदद करने के लिए है ।
इस संशोधित बूटस्ट्रैप 4 कार्सेल को डबल करने से केवल आधा ही सही ढंग से काम करता है (स्क्रॉल लूप काम करना बंद कर देता है)
कैसे बिना css और jquery को मिलाए सिंगल पेज में 2 बूटस्ट्रैप स्लाइडर्स बनाएं?
बूटस्ट्रैप 4 मल्टी हिंडोला 3 के बजाय 4 छवियां दिखाते हैं
