我耀学IT—day07-bootstrap轮播

一、Bootstrap5 轮播

轮播是一个循环的幻灯片：

1.1 如何创建轮播

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

例：

<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
  <!-- 轮播图片 -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="img/lb1.jpg" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="img/lb2.jpg" class="d-block" style="width:100%">
    </div>
    <div class="carousel-item">
      <img src="img/lb3.jpg" class="d-block" style="width:100%">
    </div>
  </div>
  
  <!-- 左右切换按钮 -->
  <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
    <span class="carousel-control-next-icon"></span>
  </button>
</div>

1.2 指示符

将指示器添加到轮播界面，以及上一个/下一个控件。这些指示器允许用户直接跳转到特定幻灯片。

例：

<!-- 指示符 -->
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
    <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
  </div>

1.3 轮播图片上添加描述

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

例：

<div class="carousel-item">
  <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg" class="d-block" style="width:100%">
  <div class="carousel-caption">
        <h3>第一张图片描述标题</h3>
        <p>第一张图片描述内容显示在这里！！！</p>
  </div>
</div>

1.4 轮播图淡入淡出效果

将 .carousel-fade 添加到轮播界面，以使用淡入淡出过渡而不是幻灯片来制作幻灯片动画。根据您的轮播内容（例如，纯文本幻灯片），您可能希望将 .bg-body 或一些自定义 CSS 添加到 .carousel-items 中，以实现适当的交叉淡入淡出。

例：

<div id="demo" class="carousel slide carousel-fade">

1.5 轮播图自动播放

您可以通过将data-bs-ride设置为carousel，使轮播界面在页面加载时自动播放。自动播放轮播会在鼠标悬停时自动暂停。可以使用暂停选项来控制此行为。在支持页面可见性 API 的浏览器中，当网页对用户不可见时（例如，当浏览器选项卡处于非活动状态或浏览器窗口最小化时），轮播界面将停止循环

<div id="demo" class="carousel slide" data-bs-ride="carousel">

如果data-bs-ride设置为 true，而不是轮播，则轮播不会在页面加载时自动开始循环。相反，它只会在第一次用户交互后启动。

<div id="demo" class="carousel slide" data-bs-ride="true">

1.6 轮播时间

将 data-bs-interval=“” 添加到 .carousel-item 以更改自动循环到下一个项目之间的延迟时间。

例：

<div class="carousel-item" data-bs-interval="2000">
    <img src="img/lb2.jpg" class="d-block" style="width:100%">
</div>

1.7 轮播禁用触摸滑动

轮播支持在触摸屏设备上向左/向右滑动以在幻灯片之间移动。可以通过将触摸选项设置为 false 来禁用此功能。

<div id="demo" class="carousel slide" data-bs-touch="false">

1.8 以上案例中使用的类说明

类	描述
.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	切换图片的过渡和动画效果，如果你不需要这样的效果，可以删除这个类。

[我耀学IT]  Patience is key in life

1.9 小知识

在BootStrap中，给<img>添加 .img-responsive样式就可以实现图片响应式。

<img src="..." class="img-responsive">

我们在用bootstrap排版内容的时候，有的时候在内容中需要图片水平居中对齐 。

一般情况下，我们的图片都使用了 .img-responsive 类来实现响应式图片。如果需要实现响应式图片水平居中，那么我们要使用 .center-block 类，不要用 .text-center。

<p><img class="img-responsive center-block" src="..." /></p>

[我耀学IT]  Patience is key in life