In Bootstrap, carousel indicators are used to indicate the currently active slide within a carousel component. There are two types of carousel indicators provided by Bootstrap:
Dot Indicators
Dot indicators are the default type of indicators used in Bootstrap carousels. They are represented by small circular dots located below the carousel slides.
- Each dot corresponds to a slide in the carousel, indicating which slide is currently active.
- Dot indicators are created automatically by Bootstrap when you use the carousel component.
Syntax:
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
<!-- Add more li elements for additional slides -->
</ol>
Explanation: This code snippet creates dot indicators for a Bootstrap carousel, where each dot (<li>) corresponds to a slide, with the first dot marked as active, allowing users to navigate through the slides visually.
Numbered Indicators
Numbered indicators are an alternative type of indicators that display numbers instead of dots.
- Each number corresponds to a slide in the carousel, providing a numeric representation of the active slide.
- Numbered indicators can be implemented by manually adding HTML elements with appropriate numbering and styling to represent the indicators.
Syntax:
<ol class="carousel-indicators">
<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active">1</li>
<li data-target="#carouselExampleIndicators" data-slide-to="1">2</li>
<li data-target="#carouselExampleIndicators" data-slide-to="2">3</li>
<!-- Add more li elements for additional slides -->
</ol>
Explanation: This HTML markup generates numbered indicators for a Bootstrap carousel, where each number (<li>) represents a slide, with the first number indicating the active slide, providing a clear indication of slide progression for users.