To create a Bootstrap carousel graph, perform the following steps: Create a parent container with the carousel class. Add the slide, use the carousel-item class to add the active class to the first slide. (Optional) Add an indicator to add an ol element with the carousel-indicators class inside the container. (Optional) Add controls, add buttons with carousel-control-prev and carousel-control-next classes in the container. (Optional) Initialize the carousel graph with JavaScript to enable autoplay, timers, and indicators.

How to create a Bootstrap carousel

A carousel is a collection of images or slideshows that are automatically displayed within a specified time interval. Bootstrap provides a simple class that allows you to easily create carousel diagrams in web pages.

Step 1: Create a container

Create a parent container with carousel class:

 <code class="html"><div class="carousel">
<p> <strong>Step 2: Add slides</strong></p>
<p> Add slides in the container, use <code>carousel-item</code> class:</p>
<pre class="brush:php;toolbar:false"> <code class="html"><div class="carousel-item active"> <img src="/static/imghw/default1.png" data-src="image1.jpg" class="lazy" alt="Image 1"> </div> <div class="carousel-item"> <img src="/static/imghw/default1.png" data-src="image2.jpg" class="lazy" alt="Image 2"> </div></code>

Add the active class to the first slide and it will be displayed as the initial slide.

Step 3: Add indicator (optional)

The indicator displays the current and potential slideshows in the carousel diagram. Add an ol element with carousel-indicators class inside the container:

 <code class="html"><ol class="carousel-indicators"> <li data-target=".carousel" data-slide-to="0" class="active"> <li data-target=".carousel" data-slide-to="1"> </ol></code>

Step 4: Add controls (optional)

The control allows the user to manually navigate the carousel diagram. Add buttons with carousel-control-prev and carousel-control-next classes inside the container:

 <code class="html"><a class="carousel-control-prev" href=".carousel" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">上一張</span> </a> <a class="carousel-control-next" href=".carousel" role="button" data-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">下一張</span> </a></code>

Step 5: Initialize the carousel map (optional)

Initialize the carousel graph with JavaScript to enable autoplay, timers, and indicators.

 <code class="javascript">$('.carousel').carousel({ interval: 5000 // 自動(dòng)播放的間隔時(shí)間（毫秒） });</code>

Finish

These steps create a responsive Bootstrap carousel with autoplay, indicators, and controls.