bootstrap4--轮播、滚动监听

 目录

 轮播

滚动监听

水平滚动监听

垂直滚动监听

---

轮播

        在之前的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="">