利用Bootstrap实现轮播图

最新推荐文章于 2024-01-15 19:39:34 发布

^^为欢几何^^

最新推荐文章于 2024-01-15 19:39:34 发布

阅读量872

点赞数

文章标签： bootstrap css javascript

本文链接：https://blog.csdn.net/qq_52526079/article/details/130662189

版权

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 添加让 viewport（视口）支持响应式布局的 标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- 引入Bootstrap Css文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <title>Document</title>
    <style>
        img {
            /* width: 100%; */
            /* height: 100%; */
        }
    </style>
</head>

<body>
    <!-- <h1>Hello, world!</h1> -->
    <!-- 旋转图标 -->
    <!-- <div class="spinner-border text-primary" role="status">
        <span class="sr-only">Loading...</span>
    </div> -->

    <!-- 轮播图 -->
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          </ol>
        <div class="carousel-inner">
            <div class="carousel-item active">
                <img src="../语句学习/img/1.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img src="../语句学习/img/2.jpg" class="d-block w-100">
            </div>
            <div class="carousel-item">
                <img src="../语句学习/img/6.jpg" class="d-block w-100">
                <!-- <img src="../语句学习/img/6.jpg"> -->
            </div>
        </div>
        <button class="carousel-control-prev" type="button" 
            data-target="#carouselExampleIndicators" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </button>
        <button class="carousel-control-next" type="button" 
        data-target="#carouselExampleIndicators" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </button>
    </div>
    </div>

    <!-- 引入集成包              jQuery 和 Bootstrap 集成包（集成了 Popper） -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.min.js"></script>
</body>

</html>

注意：在实现轮播图的过程中引入的Bootstrap css文件和集成包时需要删除一下两个属性，否则会报错。