Carousel, a bootstrap image carousel plug-in

Time:2021-4-23

Start: the bootstrap carousel plug-in needs to be introduced carousel.js Or introduce it directly bootstrap.min.js

Basic principle:

Step 1: set the container for image carousel— Everything else needs to be in this container
The carousel style is used to give the container an ID value, which is convenient to trigger later with the data attribute.

<div id="demo" class="carousel"></div>

Step 2: set the picture carousel counter.
In the container div.carousel A carousel indicators style is used, which is displayed in the form of white dots (the specific style is shown in bootstrap.css From line 5835)

<div id="demo" class="carousel">
        <ol class="carousel-indicators">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>
</div>

Step 3: set up the carousel picture playing area
The most critical area is mainly used to place the images that need to be rotated. It is controlled by carousel inner style, and the item container is used to place each rotated image.

<div id="demo" class="carousel">

        <ol class="carousel-indicators">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>

    <div class="carousel-inner">
        <div class="item">
            ![](img/indexLsit04.png)
        </div>
        <div class="item">
            ![]()
        </div>
    </div>

</div>

Step 4: set up the picture carousel controller
Generally, picture carousel has a controller that plays forward and backward. Here, carousel control style is used with left and right.

<div id="demo" class="carousel">

        <ol class="carousel-indicators">
            <li class="active"></li>
            <li></li>
            <li></li>
        </ol>

    <div class="carousel-inner">
        <div class="item">
            ![](img/indexLsit04.png)
        </div>
        <div class="item">
            ![]()
        </div>
    </div>

    <a class="carousel-control left">
        <span class="glyphicon glyphicon-chevron-left"></span>
    </a>
    <a class="carousel-control right">
        <span class="glyphicon glyphicon-chevron-right"></span>
    </a>

</div>

demo:

<!DOCTYPE html>  
<html>  
<head lang="en">  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>  
    <!--  Solve the compatibility problem -- >  
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  
    <meta name="renderer" content="webkit">  
    <!--  Search engine -- >  
    <meta name="keywords" content="bootstrap,css,html">  

    <script></script>  
    <!--  JQuery is at the front, and bootstrap relies on jQuery -- >  
    <script></script>  

    <link rel="stylesheet" href="css/bootstrap.min.css"/>  
    <link rel="icon" href="favicon.icon">  
    <title></title>  
    <style>  
        #slidershow{  
            width: 300px;  
            height: 300px;  
            margin: 100px 400px;  
        }  
        img{  
            width: 300px;  
            height: 300px;  
        }  

    </style>  
</head>  
<body>  

<div id="slidershow" class="carousel slide"><!--  Container for image carousel  

    <!--  Set the order of picture rotation counter picture rotation -- >  
    <ol class="carousel-indicators">  
        <li class="active" data-target="#slidershow" data-slide-to="0"></li>  
        <li data-target="#slidershow" data-slide-to="1"></li>  
        <li data-target="#slidershow" data-slide-to="2"></li>  
        <li data-target="#slidershow" data-slide-to="3"></li>  
        <li data-target="#slidershow" data-slide-to="4"></li>  
    </ol>  

    <!--  Set the carousel picture playing area -- >  
    <div class="carousel-inner">  
        <div class="item active">  
            <a href="#">![](img/indexLsit01.png)</a>  
        </div>  
        <div class="item"><a href="#">![](img/indexLsit02.png)</a></div>  
        <div class="item"><a href="#">![](img/indexLsit03.png)</a></div>  
        <div class="item"><a href="#">![](img/indexLsit04.png)</a></div>  
        <div class="item"><a href="#">![](img/indexLsit05.png)</a></div>  
    </div>  

    <!--  Set picture carousel controller -- >  
    <a class="left carousel-control " href="#slidershow"  data-slide="prev">  
        <span class="glyphicon glyphicon-chevron-left"></span>  
    </a>  
    <a class="right carousel-control " href="#slidershow"  data-slide="next">  
        <span class="glyphicon glyphicon-chevron-right"></span>  
    </a>  

</div><!--  Container for image carousel  

</body>  
</html>

It presents the following styles:

Carousel, a bootstrap image carousel plug-in