How to do bootstrap carousel

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 // 自动播放的间隔时间（毫秒） });</code>

Finish

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

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