Bootstrap4 Carousel

A carousel (also known as a slide show or image slider) is one of the best methods to display a large amount of content in a small space on a web page. It is a dynamic representation of content, where users can view or access text and images by browsing through multiple items in a loop.

A carousel is a looping slide show (address:https://www.oldtoolbag.com/run/html/bootstrap-carousel-example.html)：

How to create a carousel

The following example creates a simple image carousel effect :

Example

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　/*　Make the image fully responsive　*/
　　.carousel-inner　img　{
　　　　　　width:　100%;
　　　　　　height:　100%;
　　}
　　</style>
</head>
<body>
<div　id="demo"　class="carousel　slide"　data-ride="carousel">
　
　　<!--　indicators　-->
　　<ul　class="carousel-indicators">
　　　　<li　data-target="#demo"　data-slide-to="0"　class="active"></li>
　　　　<li　data-target="#demo"　data-slide-to="1></li>
　　　　<li　data-target="#demo"　data-slide-to="2></li>
　　</ul>
　
　　<!--　carousel images　-->
　　<div　class="carousel-inner">
　　　　<div　class="carousel-item　active">
　　　　　　<img　src="https://www.oldtoolbag.com/run/images/slide01.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://www.oldtoolbag.com/run/images/slide02.png">
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://www.oldtoolbag.com/run/images/slide03.png">
　　　　</div>
　　</div>
　
　　<!--　toggle buttons for left and right　-->
　　<a　class="carousel-control-prev"　href="#demo"　data-slide="prev">
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a　class="carousel-control-next"　href="#demo"　data-slide="next">
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>

Test and see ‹/›

slide images

Add descriptions on each <div class="carousel"-item"> Add <div> inside to set the description text for the carousel images:

Example

<!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap Example</title>
　　<meta　charset="utf-8">-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
　　<style>
　　/*　Make the image fully responsive　*/
　　.carousel-inner　img　{
　　　　　　width:　100%;
　　　　　　height:　100%;
　　}
　　</style>
</head>
<body>
<div　id="demo"　class="carousel　slide"　data-ride="carousel">
　
　　<!--　indicators　-->
　　<ul　class="carousel-indicators">
　　　　<li　data-target="#demo"　data-slide-to="0"　class="active"></li>
　　　　<li　data-target="#demo"　data-slide-to="1></li>
　　　　<li　data-target="#demo"　data-slide-to="2></li>
　　</ul>
　
　　<!--　carousel images　-->
　　<div　class="carousel-inner">
　　　　<div　class="carousel-item　active">
　　　　　　<img　src="https://www.oldtoolbag.com/run/images/slide01.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Description title of the first image</h2>
　　　　　　　　<p>Description text!</p>/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://www.oldtoolbag.com/run/images/slide02.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Description title of the second image</h2>
　　　　　　　　<p>Description text!</p>/p>
　　　　　　</div>
　　　　</div>
　　　　<div　class="carousel-item">
　　　　　　<img　src="https://www.oldtoolbag.com/run/images/slide03.png">
　　　　　　<div　class="carousel-caption">
　　　　　　　　<h2>Description title of the third image</h2>
　　　　　　　　<p>Description text!</p>/p>
　　　　　　</div>
　　　　</div>
　　</div>
　
　　<!--　toggle buttons for left and right　-->
　　<a　class="carousel-control-prev"　href="#demo"　data-slide="prev">
　　　　<span class="carousel-control-prev-icon"></span>
　　</a>
　　<a　class="carousel-control-next"　href="#demo"　data-slide="next">
　　　　<span class="carousel-control-next-icon"></span>
　　</a>
　
</div>
</body>
</html>

Test and see ‹/›

Class descriptions used in the above examples

Class	Description
.carousel	Create a carousel
.carousel-indicators	Add an indicator for the carousel, which is the individual dots at the bottom of the carousel, which can show the current image number during the carousel process.
.carousel-inner	Add the image to be switched
.carousel-item	Specify the content of each image
.carousel-control-prev	Add a left button, clicking it will return to the previous image.
.carousel-control-next	Add a right button, clicking it will switch to the next image.
.carousel-control-prev-icon	With .carousel-control-Use with .carousel together, to set the left button
.carousel-control-next-icon	With .carousel-control-Use with .carousel together, to set the right button
.slide	Transition and animation effects for switching images, if you do not need such effects, you can delete this class.

Bootstrap4 Modal Bootstrap4 Custom Form

Bootstrap4 Basic Tutorial

Bootstrap4 Carousel

How to create a carousel

slide images

Class descriptions used in the above examples