کاروسل ها
یک کامپوننت نمایش اسلاید برای چرخش در میان عناصر یا اسلایدهای متن - مانند کاروسل.
مثال های پایه
کاروسل ها به طور خودکار ابعاد اسلاید را عادی سازی نمی کنند. ممکن است برای عملکرد مناسب نیاز به استفاده از ابزارهای کمکی اضافی داشته باشید.
مثال کد
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="..." class="d-block w-100 rounded" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 rounded" alt="...">
</div>
<div class="carousel-item">
<img src="..." class="d-block w-100 rounded" alt="...">
</div>
</div>
</div>
با کنترل و نشانگرها
می توانید نشانگرها و همچنین کنترل های قبلی و بعدی را به کاروسل اضافه کنید.
مثال کد
<div id="carouselExConInd" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExConInd" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExConInd" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExConInd" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/slides/slide-a.jpg" class="d-block w-100 rounded" alt="کاروسل">
</div>
<div class="carousel-item">
<img src="./images/slides/slide-b.jpg" class="d-block w-100 rounded" alt="کاروسل">
</div>
<div class="carousel-item">
<img src="./images/slides/slide-c.jpg" class="d-block w-100 rounded" alt="کاروسل">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExConInd" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">قبلی</span>
</a>
<a class="carousel-control-next" href="#carouselExConInd" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">بعدی</span>
</a>
</div>
با زیرنویس
با عنصر .carousel-caption در هر .carousel-item، به راحتی به اسلایدهای خود زیرنویس اضافه کنید. همانطور که در زیر نشان داده شده است، با ابزارهای نمایش اختیاری، می توان آن ها را به راحتی در درگاه دید کوچکتر پنهان کرد. ابتدا آن ها را با .d-none پنهان می کنیم و آن ها را در دستگاه های متوسط با .d-md-block برمی گردانیم.
مثال کد
<div id="carouselExCap" class="carousel slide" data-bs-ride="carousel">
<ol class="carousel-indicators">
<li data-bs-target="#carouselExCap" data-bs-slide-to="0" class="active"></li>
<li data-bs-target="#carouselExCap" data-bs-slide-to="1"></li>
<li data-bs-target="#carouselExCap" data-bs-slide-to="2"></li>
</ol>
<div class="carousel-inner text-light">
<div class="carousel-item active">
<img src="./images/slides/slide-a.jpg" class="d-block w-100 rounded" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>برچسب اسلاید اول</h5>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
</div>
</div>
<div class="carousel-item">
<img src="./images/slides/slide-b.jpg" class="d-block w-100 rounded" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>برچسب اسلاید دوم</h5>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
</div>
</div>
<div class="carousel-item">
<img src="./images/slides/slide-c.jpg" class="d-block w-100 rounded" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>برچسب اسلاید سوم</h5>
<p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ.</p>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExCap" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">قبلی</span>
</a>
<a class="carousel-control-next" href="#carouselExCap" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">بعدی</span>
</a>
</div>
افکت متقاطع
.carousel-fade را به کاروسل خود اضافه کنید تا به جای اسلاید، اسلایدها را با یک انتقال محو کنید.
مثال کد
<div id="carouselExFade" class="carousel slide carousel-fade" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="./images/slides/slide-a.jpg" class="d-block w-100 rounded" alt="کاروسل">
</div>
<div class="carousel-item">
<img src="./images/slides/slide-b.jpg" class="d-block w-100 rounded" alt="کاروسل">
</div>
<div class="carousel-item">
<img src="./images/slides/slide-c.jpg" class="d-block w-100 rounded" alt="کاروسل">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExFade" role="button" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">قبلی</span>
</a>
<a class="carousel-control-next" href="#carouselExFade" role="button" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">بعدی</span>
</a>
</div>
