Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Impara Implementing Carousels for Interactive Content | Advanced Concepts
Bootstrap Essentials for Modern Websites

book
Implementing Carousels for Interactive Content

Carousels, also known as image sliders, are interactive elements used to display a series of images or content items rotating. They are frequently utilized to display products, portfolio items, or featured content.

Key Features

Bootstrap's carousel component is a powerful tool for creating engaging user experiences. It features automatic cycling, navigation controls, and customization options for transition effects, timing, and indicators.

Usage Classes

  • carousel: This class is applied to the container element of the carousel;
  • carousel-inner: This class applies to a <div> element inside the container. It wraps all the carousel items (slides) and defines the inner content of the carousel;
  • carousel-item: This class is applied to individual slides within the carousel. Each carousel-item represents one slide in the carousel;
  • active: This class marks a slide as active or the currently displayed slide. It ensures that the corresponding slide is visible when the carousel is rendered;
  • carousel-control-prev and carousel-control-next: These classes are applied to the previous and next navigation buttons. They provide controls for users to navigate through the carousel manually;
  • data-bs-target and data-bs-slide: These attributes are used with the navigation buttons to specify the target carousel and the direction of slide transitions;
  • carousel-indicators: This class is applied to a list of indicator elements (usually <li> elements) representing each carousel slide;
  • data-bs-interval and data-bs-pause: These attributes configure the interval (in milliseconds) between slide transitions and specify whether the carousel should pause on hover or focus.
html

index.html

css

index.css

copy
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Carousels Example 1</title>
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
rel="stylesheet"
/>
<link rel="stylesheet" href="index.css" />
</head>
<body>
<div class="container">
<!-- Carousel -->
<div id="carouselExampleDark" class="carousel carousel-dark slide">
<!-- Carousel Indicators -->
<div class="carousel-indicators">
<!-- Indicators for each slide -->
<button
type="button"
data-bs-target="#carouselExampleDark"
data-bs-slide-to="0"
class="active"
aria-current="true"
aria-label="Slide 1"
></button>
<button
type="button"
data-bs-target="#carouselExampleDark"
data-bs-slide-to="1"
aria-label="Slide 2"
></button>
<button
type="button"
data-bs-target="#carouselExampleDark"

Tutto è chiaro?

Come possiamo migliorarlo?

Grazie per i tuoi commenti!

Sezione 4. Capitolo 5
some-alt