Bootstrap Carousel

Basic Carousel

Basic Bootstrap Carousel Slide

HTML Code for this Element

<div id="carouselExample" class="carousel slide">
	<div class="carousel-inner" style="height: 50vh;">
	  	<div class="carousel-item active">
			<img src="assets/img/abstract-images/abstract-1.jpg" class="d-block w-100 object-fit-cover" alt="...">
		</div>
		<div class="carousel-item">
			<img src="assets/img/abstract-images/abstract-2.jpg" class="d-block w-100 object-fit-cover" alt="...">
		</div>
		<div class="carousel-item">
			<img src="assets/img/abstract-images/abstract-3.jpg" class="d-block w-100 object-fit-cover" alt="...">
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">Next</span>
	</button>
</div>

Carousel with Indicators

Add indicators to any carousel to help users jump to a specific slide.

HTML Code for this Element

<div id="carouselExampleIndicators" class="carousel slide">
	<div class="carousel-indicators">
		<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
		<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="1" aria-label="Slide 2"></button>
		<button type="button" data-bs-target="#carouselExampleIndicators" data-bs-slide-to="2" aria-label="Slide 3"></button>
	</div>
	<div class="carousel-inner">
		<div class="carousel-item active">
			<img src="assets/img/abstract-images/abstract-2.jpg" class="d-block w-100" alt="...">
		</div>
		<div class="carousel-item">
			<img src="assets/img/abstract-images/abstract-4.jpg" class="d-block w-100" alt="...">
		</div>
		<div class="carousel-item">
			<img src="assets/img/abstract-images/abstract-5.jpg" class="d-block w-100" alt="...">
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleIndicators" 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="#carouselExampleIndicators" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">Next</span>
	</button>
</div>

Carousel Captions

You can add captions to your slides with the .carousel-caption element within any .carousel-item.

First slide label

Some representative placeholder content for the first slide.

Second slide label

Some representative placeholder content for the second slide.

Third slide label

Some representative placeholder content for the third slide.

HTML Code for this Element

<div id="carouselExampleCaptions" class="carousel slide">
	<div class="carousel-indicators">
		<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
		<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
		<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
	</div>
	<div class="carousel-inner" style="height: 50vh;">
		<div class="carousel-item active">
			<img src="assets/img/abstract-images/abstract-3.jpg" class="d-block w-100" alt="...">
			<div class="carousel-caption d-none d-md-block">
				<h5>First slide label</h5>
				<p>Some representative placeholder content for the first slide.</p>
			</div>
	  	</div>
		<div class="carousel-item">
			<img src="assets/img/abstract-images/abstract-4.jpg" class="d-block w-100" alt="...">
			<div class="carousel-caption d-none d-md-block">
				<h5>Second slide label</h5>
				<p>Some representative placeholder content for the second slide.</p>
			</div>
		</div>
	  	<div class="carousel-item">
			<img src="assets/img/abstract-images/abstract-1.jpg" class="d-block w-100" alt="...">
			<div class="carousel-caption d-none d-md-block">
				<h5>Third slide label</h5>
				<p>Some representative placeholder content for the third slide.</p>
			</div>
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" 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="#carouselExampleCaptions" data-bs-slide="next">
	  <span class="carousel-control-next-icon" aria-hidden="true"></span>
	  <span class="visually-hidden">Next</span>
	</button>
</div>

Crossfade Animation

Add .crarousel-fade to your carousel to animated slides witha a fade transition instead of a slide

HTML Code for this Element

<div id="carouselExampleFade" class="carousel slide carousel-fade">
	<div class="carousel-inner" style="height: 50vh;">
		<div class="carousel-item active">
			<img src="assets/img/abstract-images/abstract-4.jpg" class="d-block" alt="...">
		</div>
		<div class="carousel-item">
			<img src="assets/img/abstract-images/abstract-6.jpg" class="d-block" alt="...">
		</div>
		<div class="carousel-item">
			<img src="assets/img/abstract-images/abstract-3.jpg" class="d-block" alt="...">
		</div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleFade" 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="#carouselExampleFade" data-bs-slide="next">
		<span class="carousel-control-next-icon" aria-hidden="true"></span>
		<span class="visually-hidden">Next</span>
	</button>
</div>

Autoplay Carousel

Set data-bs-ride="" to .carousel to activate autoplay for the slides.

HTML Code for this Element

<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
	<div class="carousel-inner" style="height: 50vh;">
	  <div class="carousel-item active">
		<img src="assets/img/abstract-images/abstract-5.jpg" class="d-block w-100" alt="...">
	  </div>
	  <div class="carousel-item">
		<img src="assets/img/abstract-images/abstract-4.jpg" class="d-block w-100" alt="...">
	  </div>
	  <div class="carousel-item">
		<img src="assets/img/abstract-images/abstract-2.jpg" class="d-block w-100" alt="...">
	  </div>
	</div>
	<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" 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="#carouselExampleAutoplaying" data-bs-slide="next">
	  <span class="carousel-control-next-icon" aria-hidden="true"></span>
	  <span class="visually-hidden">Next</span>
	</button>
</div>

Disabled Touch Swiping

Disable swiping left/right on touchscreen devices by setting the touch option to false

HTML Code for this Element

<div id="carouselExampleControlsNoTouching" class="carousel slide" data-bs-touch="false">
	<div class="carousel-inner">
	  <div class="carousel-item active">
		<img src="assets/img/abstract-images/abstract-2.jpg" class="d-block w-100" alt="...">
	  </div>
	  <div class="carousel-item">
		<img src="assets/img/abstract-images/abstract-5.jpg" class="d-block w-100" alt="...">
	  </div>
	  <div class="carousel-item">
		<img src="assets/img/abstract-images/abstract-4.jpg" class="d-block w-100" alt="...">
	  </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>