چطور میشه چندین آیتم رو در یک carousel بوتاسترپ نمایش داد؟
bootstrap multiple items carousel several carousel items shown at once
سلام چطور میشه با استفاده از بوت استرپ چندین آیتم رو در یک carousel نمایش داد؟ میخوام بدونم چطور میتونم در هر بار نمایش carousel چندین تصویر یا محتوا رو نشون بدم؟
سلام برای نمایش چندین آیتم در یک carousel بوتاسترپ باید از نسخه جدیدترین پلاگین carousel و تنظیمات خاصی استفاده کنی.بوت استرپ به طور پیش فرض کاروسل رو برای نمایش یک آیتم در هر بار طراحی کرده، اما با یکم کاستوم میتونی چندین آیتم رو نمایش بدی
<!-- Carousel wrapper -->
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="row">
<div class="col-4">
<img src="image1.jpg" class="d-block w-100" alt="...">
</div>
<div class="col-4">
<img src="image2.jpg" class="d-block w-100" alt="...">
</div>
<div class="col-4">
<img src="image3.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
<div class="carousel-item">
<div class="row">
<div class="col-4">
<img src="image4.jpg" class="d-block w-100" alt="...">
</div>
<div class="col-4">
<img src="image5.jpg" class="d-block w-100" alt="...">
</div>
<div class="col-4">
<img src="image6.jpg" class="d-block w-100" alt="...">
</div>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExample" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExample" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
.carousel-item {
display: flex;
}
.carousel-item img {
max-width: 100%;
height: auto;
}
تو این مثال، هر آیتم carousel شامل یک ردیف از ستونها (col-4
) هست که هر کدوم یک تصویر را نمایش میده به این ترتیب میتونی چندین تصویر رو در هر صفحه نمایش بدی و با CSS مطمئن شو که تصاویر درست نمایش داده میشن و در فضای خودشون جا میگیرن
با این کانفیگ هر بار که carousel تغییر میکنه، چندین آیتم نمایش داده میشه و این کار به کمک کلاس های بوتاسترپ و تنظیمات carousel انجام میشه