Bootstrap realizes the effect of carousel

This article shares the specific code of Bootstrap to achieve the effect of carousel map for your reference. The specific content is as follows

Achieve results

step

1. Download bootstrap and jquery-3.6.0.min.js, and reference them in HTML. Note that jq.js should be referenced before all js.

2. Modify and import the image according to the Carousel example on the official website https://v3.bootcss.com/javascript/. The body source code is as follows

<div class="box">
        <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
            <!-- Indicators -->
            <ol class="carousel-indicators">
                <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                <li data-target="#carousel-example-generic" data-slide-to="3"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="./images/xuezhong_1.jpg" alt="...">
                    <div class="carousel-caption">
                        Picture 1
                    </div>
                </div>
                <div class="item">
                    <img src="./images/guimizhizhu_2.jpg" alt="...">
                    <div class="carousel-caption">
                        Picture 2
                    </div>
                </div>
                <div class="item">
                    <img src="./images/jianlai_3.jpg" alt="...">
                    <div class="carousel-caption">
                        Picture 3
                    </div>
                </div>
                <div class="item">
                    <img src="./images/yichang_4.jpg" alt="...">
                    <div class="carousel-caption">
                        Picture 4
                    </div>
                </div>

            </div>

            <!-- Controls -->
            <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
</div>

Adjust the image style in style.css

.box {
    width: 600px;
    height: 300px;
    background-color: pink;
    margin: 100px auto;
}

.carousel,
.carousel img {
    width: 100%;
    height: 300px !important;
}

Add carousel time in js

<script>
        $('.carousel').carousel({
            interval: 2000
        })
</script>

You can modify the required styles according to the guidance of the official website

The steps are completed and the bootstrap carousel is implemented.

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Bootstrap grid system layout detailed explanation
Analysis of how to use the bootstrap grid system
BootStrap navigation bar problem record
Embracing Bootstrap — Navigation Bar
Detailed explanation of how to use the bootstrap carousel template
Javascript Bootstrap's grid system, navigation bar and carousel detailed explanation

<<: Mysql solution to improve the efficiency of copying large data tables

>>: Detailed explanation of nginx-naxsi whitelist rules