PROWAREtech

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

Blazor: Bootstrap Carousel Example

How to enable the bootstrap carousel in .NET 8, .NET 6 and .NET Core 3.1 Blazor WebAssembly (WASM).

This article addresses more than one version of .NET and Bootstrap: .NET 8/Bootstrap v5.1, .NET 6/Boostrap v5.1 or .NET Core 3.1/Bootstrap v4.3

To begin, create a project named BlazorCarousel.

This example is using the Bootstrap v5.1 carousel with the new .NET 8 Web App which is a hybrid of server-side and client-side (WebAssembly).

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 App.razor 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
}

App.razor

The above will result in an App.razor 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" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="BlazorCarousel.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet />
    <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>
    <Routes />
    <script src="_framework/blazor.web.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 for Either the Client-side or Server-side

Create a client-side (WebAssembly) razor page that injects the IJSRuntime interface and use it to call the startCarousel JavaScript function.

@page "/carousel"
@rendermode @(new InteractiveAutoRenderMode(prerender: false))
@inject IJSRuntime JSRuntime

<PageTitle>Carousel</PageTitle>

<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
	}
}

Alternatively, if wanting to create a server-side component, then create a new razor page on the server-side project, like this:

@page "/carousel"

<PageTitle>Carousel</PageTitle>

<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>

<script type="text/javascript">
	var carouselName = "@carouselName";
	startCarousel(carouselName);
</script>

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

Run the application with either server-side or client-side versions of the carousel (but not both). Navigate to /carousel.

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

This example is using .NET 6 with 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 with 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

Blazor: Bootstrap Carousel Example

How to enable the bootstrap carousel in .NET 8, .NET 6 and .NET Core 3.1 Blazor WebAssembly (WASM).
Blazor: Compress and Upload Files

Example of compressing and uploading files to a Web API or REST API controller in Blazor WebAssembly (WASM).
Blazor: Compress Web API or REST API Output

Example of using the compression classes, such as the BrotliStream class, to compress outgoing data of a Web API or REST API to achieve greater compression ratios than what is done with site-wide compression enabled.
Blazor: Create and Use MS SQL Database with Entity Framework Core

Programmatically create and use MS SQL Server database for ASP.NET Core Web API and Blazor WebAssembly (WASM).
Blazor: Create Many-to-Many Table Join in MS SQL Server

Programmatically create a many-to-many join in .NET 5,.NET 6 and .NET 8 with Entity Framework Core.
Blazor: DataGrid Component Example

Example usage of a DataGrid component for displaying data in Blazor WebAssembly (WASM).
Blazor: DataRepeater Component Example - Advanced

Example usage of a DataRepeater component for creating, displaying and updating data in Blazor WebAssembly (WASM).
Blazor: DataRepeater Component Example - Simple

Example usage of a DataRepeater component for creating and displaying data in Blazor WebAssembly (WASM).
Blazor: EditForm Example

Example usage of the EditForm with data validation in Blazor WebAssembly (WASM).
Blazor: Enable ThreeJS Example

How to enable THREE.js to work in Blazor WebAssembly (WASM).
Blazor: Json Web Token (JWT) Authentication Example - Advanced

An advanced example of adding JWT Bearer authentication to Blazor WebAssembly (WASM); with examples written in C#.
Blazor: Json Web Token (JWT) Authentication Example - Simple

A simple example of adding JWT Bearer authentication to Blazor WebAssembly (WASM); with examples written in C#.
Blazor: LocalStorage Utility Example

An example utility for storing data in the browser for Blazor WebAssembly (WASM).
Blazor: Log to the Console Example

An example of how to log information to the browser's console window for debugging purposes on Blazor WebAssembly (WASM).
Blazor: Login Form Example

How to implement a login form or screen using Blazor WebAssembly (WASM).
Blazor: Resize and Upload Image Files

Example of resizing and uploading image files to a Web API or REST API controller in Blazor WebAssembly (WASM).
Blazor: Reverse Geocode

Use latitude and longitude to reverse-geocode to country, US state/Canadian province and time zone in a Blazor WebAssembly (WASM) application; written in C#.
Blazor: Timer Example - Analog Clock

A Blazor WebAssembly (WASM) example using the Timer class to create and set an analog clock.
Blazor: Timer Example - Refresh Data

An example using the Timer class to refresh data from a REST API or Web API.
Blazor: Validate Credit Card Numbers

Validate credit card numbers using the Luhn Check in Blazor WebAssembly (WASM).
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