bootstrap4--轮播、滚动监听

张0x0

已于 2022-03-20 17:11:34 修改

阅读量1.9k

点赞数 2

分类专栏： web前端基础学习文章标签：前端 bootstrap

于 2021-12-23 11:45:37 首次发布

本文链接：https://blog.csdn.net/zxn200125/article/details/122103543

版权

本文详细介绍了如何在Bootstrap4中实现轮播效果，包括手动和自动轮播的设置，以及如何添加轮播指示符和控制按钮。同时，讲解了Bootstrap的滚动监听功能，分为水平和垂直两种方式，提供了具体的实现步骤，并通过实例展示了如何创建水平和垂直滚动监听，以实现实时更新导航的目标。

摘要由CSDN通过智能技术生成

轮播

在之前的html和css中我们试着做轮播效果，但是无法实现手动轮播和自动轮播同时实现，需要借助JavaScript的功能。在bootstrap4中，提供许多内置类帮助我们很容易的实现手动轮播和自动轮播的同时实现。

1.最外层div元素添加.carousel类创建一个轮播，可以选择性添加.slide类

2.第二层使用<ul>标签添加.carousel-indicators类为轮播添加指示符

3.第二层使用<div>标签添加.carousel-inner类，

4.第二层内部再嵌套第三层<div>标签.carousel-item类添加要切换的图片

5.第二层<a>标签添加.carousel-control-prev类添加左侧按钮，内部可添加<span>标签添加.carousel-control-prev-icon类设置左侧按钮

6.第二层<a>标签添加.carousel-control-next类添加右侧按钮，内部可添加<span>标签添加.carousel-control-next-icon类设置右侧按钮

●在<div class="carousel-item">内，添加div类并设置.carousel-caption类可设置轮播图片的描述文字

简单的图片轮播效果：

    <div class="container">
        <div id="demo" class="carousel slide" data-ride="carousel">
            <!-- 指示符 -->
            <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>
            <!-- 轮播图 -->
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <img src="../pics/0.jpg" alt="">
                    <!-- 添加图片描述 -->
                    <div class="carousel-caption">
                        <h3>第1张图片描述标题</h3>
                        <p>第1张图片描述文字</p>
                    </div>
                </div>
                <div class="carousel-item">
                    <img src="../pics/1.jpg" alt="">
                    <!