articles » current » blazor » wasm » bootstrap-enable-carousel

Blazor: Bootstrap Carousel Example

How to enable the bootstrap carousel in both .NET 6 and .NET Core 3.1

This article addresses two versions of .NET and Bootstrap: .NET 6/Boostrap v5.1 or .NET Core 3.1/Bootstrap v4.3

This example is using .NET 6 and the Bootstrap v5.1 carousel.

It is incredibly easy to enable the Bootstrap v5.1 carousel component. It requires that one JavaScript source file be added to the project's index.html file.

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

Then the function startCarousel() must be created.

function startCarousel(carouselId) {
	var myCarousel = document.getElementById(carouselId);
	var carousel = new bootstrap.Carousel(myCarousel);
	carousel.cycle(); // NOTE: this will cause the carousel to start immediately
}

index.html

The above will result in an index.html file that looks like this:

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Blazor .NET 6 Carousel</title>
	<base href="/" />
	<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
	<link href="css/app.css" rel="stylesheet" />
	<link href="BlazorCarousel.Client.styles.css" rel="stylesheet" />
	<script type="text/javascript">
		function startCarousel(carouselId) { // NOTE: this JavaScript function added
			var myCarousel = document.getElementById(carouselId);
			var carousel = new bootstrap.Carousel(myCarousel);
			carousel.cycle(); // NOTE: this will cause the carousel to start immediately
		}
	</script>
</head>

<body>
	<div id="app">Loading...</div>

	<div id="blazor-error-ui">
		An unhandled error has occurred.
		<a href="" class="reload">Reload</a>
		<a class="dismiss">🗙</a>
	</div>
	<script src="_framework/blazor.webassembly.js"></script>

	<!-- NOTE: THE FOLLOWING LINE ADDED -->
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

</body>

</html>

Create a RAZOR Page for the Carousel

Create or modify a razor page that injects the IJSRuntime interface and use it to call the startCarousel JavaScript function.

@page "/carousel"
@inject IJSRuntime JSRuntime

<h3>Carousel</h3>
<!-- NOTE: the data-bs- attributes added as per the Bootstrap v5.1 instructions -->
<div id="@carouselName" class="carousel slide" data-bs-ride="carousel" data-bs-wrap="true" data-bs-interval="2000" data-bs-pause="false">
	<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="https://picsum.photos/id/196/1920/1080" class="d-block w-100" alt="...">
		</div>
		<div class="carousel-item">
			<img src="https://picsum.photos/id/1057/1920/1080" class="d-block w-100" alt="...">
		</div>
		<div class="carousel-item">
			<img src="https://picsum.photos/id/1067/1920/1080" 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>

@code {
	const string carouselName = "carouselExampleIndicators"; // NOTE: the ID of the carousel

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		object[] args = { carouselName };
		await JSRuntime.InvokeVoidAsync("startCarousel", args); // NOTE: call JavaScript function with the ID of the carousel
	}
}

That's all that's needed to enable Bootstrap v5.1 carousels with .NET 6.

This example is using .NET Core 3.1 and the Bootstrap v4.3 carousel.

It is incredibly easy to enable the Bootstrap v4.3 carousel component. It requires that some JavaScript files be added to the project's index.html file.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Then the function startCarousels() must be created.

function startCarousels() {
	$('.carousel').carousel({ interval: 4000 });
}

index.html

The above will result in an index.html file that looks like this:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>Blazor .NET Core 3.1 Carousel</title>
	<base href="/" />
	<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />
	<link href="css/app.css" rel="stylesheet" />
	<script type="text/javascript">
		function startCarousels() { // NOTE: this function added
			$('.carousel').carousel({ interval: 4000 });
		}
	</script>
</head>

<body>
	<app>Loading...</app>

	<div id="blazor-error-ui">
		An unhandled error has occurred.
		<a href="" class="reload">Reload</a>
		<a class="dismiss">🗙</a>
	</div>

	<script src="_framework/blazor.webassembly.js"></script>

	<!-- NOTE: THE FOLLOWING THREE LINES ADDED -->
	<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</body>

</html>

Create a RAZOR Page for the Carousel

Create or modify a razor page that injects the IJSRuntime interface and use it to call the startCarousels JavaScript function.

@page "/carousel"
@inject IJSRuntime JSRuntime

<h3>Carousel</h3>
<div class="bd-example">
	<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
			<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
			<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
		</ol>
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img src="https://picsum.photos/id/196/1920/1080" class="d-block w-100">
				<div class="carousel-caption d-none d-md-block">
					<h5>First slide label</h5>
					<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
				</div>
			</div>
			<div class="carousel-item">
				<img src="https://picsum.photos/id/1057/1920/1080" class="d-block w-100">
				<div class="carousel-caption d-none d-md-block">
					<h5>Second slide label</h5>
					<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
				</div>
			</div>
			<div class="carousel-item">
				<img src="https://picsum.photos/id/1067/1920/1080" class="d-block w-100">
				<div class="carousel-caption d-none d-md-block">
					<h5>Third slide label</h5>
					<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
				</div>
			</div>
		</div>
		<a class="carousel-control-prev" href="#carouselExampleCaptions" 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="#carouselExampleCaptions" role="button" data-slide="next">
			<span class="carousel-control-next-icon" aria-hidden="true"></span>
			<span class="sr-only">Next</span>
		</a>
	</div>
</div>

@code {

	protected override async Task OnAfterRenderAsync(bool firstRender)
	{
		await JSRuntime.InvokeVoidAsync("startCarousels"); // NOTE: call JavaScript function
	}
}

That's all that's needed to enable Bootstrap v4.3 carousels with .NET Core 3.1.

Coding Video

https://youtu.be/IfkmFGYBSOA


This site uses cookies. Cookies are simple text files stored on the user's computer. They are used for adding features and security to this site. Read the privacy policy.
CLOSE