bhylu.com

Advertisements

Bootstrap 5 Carousel

Provide named previous/next controls and keep the example paused until the user acts.

How it works

A carousel shows one panel at a time, which can hide useful information and create motion. Use it only when the slide relationship helps the task; a static list is often easier to scan. This example does not autoplay and uses visible session names plus named controls. Automatically rotating production content needs an accessible pause/stop policy and a careful keyboard/announcement review. Reduced-motion styling does not by itself remove every usability problem of moving content.

Run and inspect

Save the complete document as index.html in a separate lab folder. Place Bootstrap 5.3.8 CSS and the matching JavaScript bundle beside it. Open the file in a normal browser. A separate local static server is optional; no database or PHP execution is required. Keep the Bootstrap licence and bundled Popper licence with redistributed assets.

Download this complete HTML source.

This example needs the complete local setup with the Bootstrap JavaScript bundle. The restricted CSS playground does not reproduce this example’s full contract.

Example

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap 5 Prefer Deliberate Slide Changes to Automatic Rotation</title>
  <link rel="stylesheet" href="bootstrap.min.css">
  <style>
.slide-panel { min-height: 12rem; }
  </style>
</head>
<body>
<main class="container py-4">
  <h1 class="h3 mb-4">Repair day</h1>
<div id="session-slides" class="carousel slide" data-bs-interval="false"><div class="carousel-inner rounded"><section id="slide-paper" class="carousel-item active"><div class="bg-primary text-white p-5 slide-panel"><h2 class="h4">Paper repair</h2><p class="mb-0">Starts at 10:00.</p></div></section><section id="slide-fabric" class="carousel-item"><div class="bg-dark text-white p-5 slide-panel"><h2 class="h4">Fabric repair</h2><p class="mb-0">Starts at 11:30.</p></div></section></div><button class="carousel-control-prev" type="button" data-bs-target="#session-slides" data-bs-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="visually-hidden">Previous session</span></button><button id="next-slide" class="carousel-control-next" type="button" data-bs-target="#session-slides" data-bs-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="visually-hidden">Next session</span></button></div>
</main>
  <script src="bootstrap.bundle.min.js"></script>
</body>
</html>

Expected result

Paper is initially visible. Selecting Next session reveals Fabric and hides the previous slide.

The first slide’s active class defines a usable initial state. The control target matches the carousel ID. The review waits for the actual transition before checking the old slide’s disappearance. Neither slide contains a fake booking action or time-sensitive live availability claim. Essential event conditions should remain accessible outside a rotating presentation.

Check Bootstrap’s official 5.3 documentation for component contracts and version details.