技术无忧-Bootstrap4 教程-Bootstrap4 轮播

Bootstrap4 教程

Bootstrap4 教程简介 Bootstrap4 安装使用 Bootstrap4 网格系统 Bootstrap4 文字排版 Bootstrap4 颜色 Bootstrap4 表格 Bootstrap4 图形形状 Bootstrap4 Jumbotron Bootstrap4 信息提示框 Bootstrap4 按钮 Bootstrap4 按钮组 Bootstrap4 徽章 Bootstrap4 进度条 Bootstrap4 分页 Bootstrap4 列表组 Bootstrap4 卡片 Bootstrap4 下拉菜单 Bootstrap4 折叠 Bootstrap4 导航 Bootstrap4 导航栏 Bootstrap4 面包屑导航 Bootstrap4 表单 Bootstrap4 表单控件 Bootstrap4 输入框组 Bootstrap4 自定义表单 Bootstrap4 轮播 Bootstrap4 模态框 Bootstrap4 提示框 Bootstrap4 弹出框 Bootstrap4 滚动监听 Bootstrap4 小工具 Bootstrap4 Flex布局 Bootstrap4 多媒体对象

Bootstrap4 轮播

如何创建轮播

以下实例创建了一个简单的图片轮播效果：

                
                    
                        <
                        div 
                        class
                        ="
                        carousel slide
                        " 
                        id
                        ="
                        demo
                        " 
                        data-ride
                        ="
                        carousel
                        ">
                    
                      <!-- 指示符 -->
                    
                          <
                        ul 
                        class
                        ="
                        carousel-indicators
                        ">
                    
                    
                            <
                        li 
                        class
                        ="
                        active
                        " 
                        data-target
                        ="
                        #demo
                        " 
                        data-slide-to
                        ="
                        0
                        ">
                        </
                        li
                        >
                    
                    
                            <
                        li 
                        data-target
                        ="
                        #demo
                        " 
                        data-slide-to
                        ="
                        0
                        ">
                        </
                        li
                        >
                    
                    
                            <
                        li 
                        data-target
                        ="
                        #demo
                        " 
                        data-slide-to
                        ="
                        0
                        ">
                        </
                        li
                        >
                    
                    
                          </
                        ul
                        >
                    
                      <!-- 轮播图片 -->
                    
                          <
                        div 
                        class
                        ="
                        carousel-inner
                        ">
                    
                    
                            <
                        div 
                        class
                        ="
                        carousel-item active
                        ">
                    
                    
                              <
                        img 
                        src
                        ="
                        https://static.runoob.com/images/mix/img_fjords_wide.jpg
                        ">
                    
                    
                            </
                        div
                        >
                    
                    
                            <
                        div 
                        class
                        ="
                        carousel-item
                        ">
                    
                    
                              <
                        img 
                        src
                        ="
                        https://static.runoob.com/images/mix/img_nature_wide.jpg
                        ">
                    
                    
                            </
                        div
                        >
                    
                    
                            <
                        div 
                        class
                        ="
                        carousel-item
                        ">
                    
                    
                              <
                        img 
                        src
                        ="
                        https://static.runoob.com/images/mix/img_mountains_wide.jpg
                        ">
                    
                    
                            </
                        div
                        >
                    
                    
                          </
                        div
                        >
                    
                      <!-- 左右切换按钮 -->
                    
                          <
                        a 
                        class
                        ="
                        carousel-control-prev
                        " 
                        href
                        ="
                        #demo
                        " 
                        data-slide
                        ="
                        prev
                        ">
                    
                    
                            <
                        span 
                        class
                        ="
                        carousel-control-prev-icon
                        ">
                        </
                        span
                        >
                    
                    
                          </
                        a
                        >
                    
                    
                          <
                        a 
                        class
                        ="
                        carousel-control-next
                        " 
                        href
                        ="
                        #demo
                        " 
                        data-slide
                        ="
                        next
                        ">
                    
                    
                            <
                        span 
                        class
                        ="
                        carousel-control-next-icon
                        ">
                        </
                        span
                        >
                    
                    
                          </
                        a
                        >
                    
                    
                        </
                        div
                        >

效果：

轮播图片上添加描述

在每个 <div class="carousel-item"> 内添加 <div class="carousel-caption"> 来设置轮播图片的描述文本：

                
                    
                        <
                        div 
                        class
                        ="
                        carousel-item
                        ">
                    
                    
                          <
                        img 
                        src
                        ="
                        https://static.runoob.com/images/mix/img_fjords_wide.jpg
                        ">
                    
                    
                          <
                        div 
                        class
                        ="
                        carousel-caption
                        ">
                    
                    
                            <
                        h3
                        >
                        第一张图片描述标题
                        </
                        h3
                        >
                    
                    
                            <
                        p
                        >
                        描述文字!
                        </
                        p
                        >
                    
                    
                          </
                        div
                        >
                    
                    
                        </
                        div
                        >

效果：

第一张图片描述标题

描述文字!

第二张图片描述标题

描述文字!

第三张图片描述标题

描述文字!

以上实例中使用的类说明

类	描述
.carousel	创建一个轮播
.carousel-indicators	为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
.carousel-inner	添加要切换的图片
.carousel-item	指定每个图片的内容
.carousel-control-prev	添加左侧的按钮，点击会返回上一张。
.carousel-control-next	添加右侧按钮，点击会切换到下一张。
.carousel-control-prev-icon	与 .carousel-control-prev 一起使用，设置左侧的按钮。
.carousel-control-next-icon	与 .carousel-control-next 一起使用，设置右侧的按钮。
.slide	切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。