2019 আপডেট হয়েছে ...
বুটস্ট্র্যাপ 4
কারাউসেলটি 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 ডেমো
বুটস্ট্র্যাপ ( দেখান, একসাথে অগ্রিম 1)
বুটস্ট্র্যাপ 4.1.0 (3 দেখান, একসাথে 1 অগ্রিম)
বুটস্ট্র্যাপ 4.1.0 (একবারে সমস্ত 4 অগ্রিম করুন)
বুটস্ট্র্যাপ ৪.৩.১ প্রতিক্রিয়াশীল (একাধিক দেখান, অগ্রিম 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
বুটপ্লি: http://bootply.com/89193 এ একটি 3.x উদাহরণ এখানে
সক্রিয় আইটেমটিতে আপনাকে চিত্রের একটি সম্পূর্ণ সারি রাখতে হবে। এখানে আরও একটি সংস্করণ যা ছোট পর্দার প্রস্থে চিত্রগুলি স্ট্যাক করে না: http://bootply.com/92514
একবারে একটি স্লাইড অগ্রিম বিকল্প বিকল্প সম্পাদনা :
পরবর্তী আইটেমগুলি ক্লোন করতে 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 টি কারাউসেলটি দ্বিগুণ করা মাত্র অর্ধেক সঠিকভাবে কার্য করবে (স্ক্রোল লুপটি কাজ করা থামিয়ে দেয়)
কীভাবে তাদের সিএসএস এবং জ্যাকুরি না মিশিয়ে একক পৃষ্ঠায় 2 বুটস্ট্র্যাপ স্লাইডার তৈরি করতে হয়?
বুটস্ট্র্যাপ 4 মাল্টি ক্যারোসেল 3 এর পরিবর্তে 4 টি চিত্র প্রদর্শন করে
