Creating a carousel chart using Bootstrap requires the following steps: Create a container containing a carousel chart, using the carousel class. Add a carousel image in the container, using the carousel-item class and the active class (only for the first image). Add control buttons, using the carousel-control-prev and carousel-control-next classes. Add carousel-indicators (small dots) and use the carousel-indicators class (optional). Set up automatic playback, add data-bs-ride="carousel" to the carousel container

How to write a carousel using Bootstrap

Carousel is an interactive component that displays a series of images on a web page. Use Bootstrap to easily add carousel images on web pages.

Create a carousel chart container

First, create a container containing a carousel diagram, using the carousel class:

 <code class="html"><div class="carousel"> ... </div></code>

Add a carousel image

Next, add the image of the carousel image in the container. Each image needs to include carousel-item class and an active class (only for the first image):

 <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 carousel graph control

To add control buttons (previous and next image), you need to add the following code to the container:

 <code class="html"><a class="carousel-control-prev" href="#myCarousel" role="button" data-bs-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="visually-hidden">Previous</span> </a> <a class="carousel-control-next" href="#myCarousel" role="button" data-bs-slide="next"> <span class="carousel-control-next-icon" aria-hidden="true"></span> <span class="visually-hidden">Next</span> </a></code>

Make sure to replace #myCarousel with the ID of the carousel graph container.

Add carousel chart indicator (optional)

To add a carousel graph metric (small dots), you need to add the following code to the container:

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

Set up automatic playback (optional)

To make the carousel graph automatically play, add data-bs-ride="carousel" attribute on the carousel graph container:

 <code class="html"><div class="carousel" data-bs-ride="carousel"> ... </div></code>

The above is the detailed content of How to write a carousel picture on bootstrap. For more information, please follow other related articles on the PHP Chinese website!