Bootstrap4轮播图

最新推荐文章于 2023-09-13 14:19:18 发布

S_aitama

最新推荐文章于 2023-09-13 14:19:18 发布

阅读量1k

点赞数 3

本文链接：https://blog.csdn.net/S_aitama/article/details/105178345

版权

文章目录

一、简介
二、框架
三、示例

一、简介

类	描述
.carousel	创建一个轮播
.carousel-indicators	为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。
.carousel-inner	添加要切换的图片
.carousel-item	指定每个图片的内容
.carousel-control-prev	添加左侧的按钮，点击会返回上一张。
.carousel-control-next	添加右侧按钮，点击会切换到下一张。

且需bootstrap4的js插件


  <script src="../jquery.min.js"></script>
  <script src="../bootstrap.min.js"></script>

二、框架

1. 父元素

<div id="#" class="carousel slide" date-ride="carousel" data-interval="2000">
...
</div>

class="carousel"引入轮播组件（必须）
class="slide"滑动特效
date-ride="carousel"自动滚动
无需使用初始化的js
data-interval="2000"自动滚动时间(ms)，不设置默认5000ms

2. 子元素

(1). 轮播内容

carousel-inner 套 carousel-item
将 .active 样式添加到其中一个幻灯片（一般第一张），否则轮播效果将无法正常运行

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="...">
    </div>
    <div class="carousel-item">
       <img src="...">
    </div>
    <div class="carousel-item">
       <img src="...">
    </div>
  </div>

(2). 包含字幕的轮播

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

  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="...">
      <div class="carousel-caption">
        <h3>第一张图片描述标题</h3>
        <p>描述文字!</p>
      </div>
    </div>
   </div>

在这里插入图片描述

(3). 底部指示器

  <ul class="carousel-indicators">
    <li data-target="#" data-slide-to="0" class="active"></li>
    <li data-target="#" data-slide-to="1"></li>
    <li data-target="#" data-slide-to="2"></li>
  </ul>

在这里插入图片描述

(4). 左右控制器

  <a class="carousel-control-prev" href="#" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>

三、示例


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"
        integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        .father {
            width: 1000px;
        } 
        <!-- 定义父元素导航图标宽度 -->
    </style>
</head>

<body>

    <div id="demo" class="father 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="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>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
        crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js"
        integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"
        crossorigin="anonymous"></script>
</body>

</html>

在这里插入图片描述

S_aitama

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
Bootstrap4轮播图

文章目录简介自动轮播简介类描述.carousel创建一个轮播.carousel-indicators为轮播添加一个指示符，就是轮播图底下的一个个小点，轮播的过程可以显示目前是第几张图。.carousel-inner添加要切换的图片.carousel-item指定每个图片的内容.carousel-control-prev添加左侧的按钮，点击...
复制链接

扫一扫