Carousels

Slides Only

Use slide class to set carousel with slides. Note the presence of the d-block and w-100 class on carousel images to prevent browser default image alignment.


<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img src="assets/images/carousel-1.jpg" class="d-block w-100" alt="carousel">
		</div>
		<div class="carousel-item">
			<img src="assets/images/carousel-2.jpg" class="d-block w-100" alt="carousel">
		</div>
	</div>
</div>

With Controls

Use slide class to set carousel with slides. Note the presence of the d-block and w-100 class on carousel images to prevent browser default image alignment.


<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img src="assets/images/carousel-2.jpg" class="d-block w-100" alt="carousel">
		</div>
		<div class="carousel-item">
			<img src="assets/images/carousel-1.jpg" class="d-block w-100" alt="carousel">
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="prev">
		<span class="carousel-control-prev-icon" aria-hidden="true"></span>
		<span class="visually-hidden">Previous</span>
	</button>
	<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControlsNoTouching" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">Next</span>
	</button>
</div>