Carousels
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. Eachcarousel-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
andcarousel-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
anddata-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
anddata-bs-pause
: These attributes configure the interval (in milliseconds) between slide transitions and specify whether the carousel should pause on hover or focus.
index.html
index.css
index.js
Code Description
-
Carousel (
<div id="carouselExampleDark" class="carousel carousel-dark slide">
):-
This is the main container for the carousel. The
carousel
class indicates that it's a carousel component in Bootstrap. Thecarousel-dark
class sets a dark theme for the carousel, andslide
class specifies the sliding animation effect.
-
This is the main container for the carousel. The
-
Carousel Indicators (
<div class="carousel-indicators">
):- These are the indicators that show which slide the carousel is currently displaying. Bootstrap provides these indicators for navigation purposes.
-
Carousel Items (
<div class="carousel-item">
):-
These are the individual slides of the carousel. Each
carousel-item
represents one slide. The first slide has theactive
class, indicating it's the initial slide.
-
These are the individual slides of the carousel. Each
-
Carousel Controls (
<button class="carousel-control-prev" ...> and <button class="carousel-control-next" ...>
):-
These are the control buttons for navigating the carousel. Bootstrap
provides previous and next buttons (
carousel-control-prev
andcarousel-control-next
) for this purpose. They are linked to the carousel by specifying the target (data-bs-target="#carouselExampleDark"
) and the type of action (data-bs-slide="prev"
or"next"
). The icons for the buttons are specified by thecarousel-control-prev-icon
andcarousel-control-next-icon
classes.
-
These are the control buttons for navigating the carousel. Bootstrap
provides previous and next buttons (
Everything was clear?
Course Content
Bootstrap: Building Stylish Websites
1. Understanding Bootstrap
2. Setting Up Environment
4. Advanced Concepts
Bootstrap: Building Stylish Websites
Carousels
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. Eachcarousel-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
andcarousel-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
anddata-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
anddata-bs-pause
: These attributes configure the interval (in milliseconds) between slide transitions and specify whether the carousel should pause on hover or focus.
index.html
index.css
index.js
Code Description
-
Carousel (
<div id="carouselExampleDark" class="carousel carousel-dark slide">
):-
This is the main container for the carousel. The
carousel
class indicates that it's a carousel component in Bootstrap. Thecarousel-dark
class sets a dark theme for the carousel, andslide
class specifies the sliding animation effect.
-
This is the main container for the carousel. The
-
Carousel Indicators (
<div class="carousel-indicators">
):- These are the indicators that show which slide the carousel is currently displaying. Bootstrap provides these indicators for navigation purposes.
-
Carousel Items (
<div class="carousel-item">
):-
These are the individual slides of the carousel. Each
carousel-item
represents one slide. The first slide has theactive
class, indicating it's the initial slide.
-
These are the individual slides of the carousel. Each
-
Carousel Controls (
<button class="carousel-control-prev" ...> and <button class="carousel-control-next" ...>
):-
These are the control buttons for navigating the carousel. Bootstrap
provides previous and next buttons (
carousel-control-prev
andcarousel-control-next
) for this purpose. They are linked to the carousel by specifying the target (data-bs-target="#carouselExampleDark"
) and the type of action (data-bs-slide="prev"
or"next"
). The icons for the buttons are specified by thecarousel-control-prev-icon
andcarousel-control-next-icon
classes.
-
These are the control buttons for navigating the carousel. Bootstrap
provides previous and next buttons (
Everything was clear?