码农教程 - 一技在手,衣食无忧! tools

Bootstrap4 轮播

❮ 上一节 下一节 ❯

Bootstrap 4 轮播

轮播是用于循环浏览元素的幻灯片。

如何创建轮播

以下示例展示了如何创建带有指示器和控件的基本轮播：

示例

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

  <!-- Indicators -->
  <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>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="la.jpg" alt="Los Angeles">
    </div>
    <div class="carousel-item">
      <img src="chicago.jpg" alt="Chicago">
    </div>
    <div class="carousel-item">
      <img src="ny.jpg" alt="New York">
    </div>
  </div>

  <!-- Left and right controls -->
  <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>
亲自试一试 »

示例解释

上面示例中每个类的作用的描述：

Class Description
.carousel Creates a carousel
.carousel-indicators Adds indicators for the carousel. These are the little dots at the bottom of each slide (which indicates how many slides there are in the carousel, and which slide the user are currently viewing)
.carousel-inner Adds slides to the carousel
.carousel-item Specifies the content of each slide
.carousel-control-prev Adds a left (previous) button to the carousel, which allows the user to go back between the slides
.carousel-control-next Adds a right (next) button to the carousel, which allows the user to go forward between the slides
.carousel-control-prev-icon Used together with .carousel-control-prev to create a "previous" button
.carousel-control-next-icon Used together with .carousel-control-next to create a "next" button
.slide Adds a CSS transition and animation effect when sliding from one item to the next. Remove this class if you do not want this effect

向幻灯片添加标题


在里面添加元素<div class="carousel-caption">每个内<div class="carousel-item">为每张幻灯片创建标题：

示例

<div class="carousel-item">
  <img src="la.jpg" alt="Los Angeles">
  <div class="carousel-caption">
    <h3>Los Angeles</h3>
    <p>We had such a great time in LA!</p>
  </div>
</div>
亲自试一试 »

完整的 Bootstrap 轮播参考

有关所有轮播选项、方法和事件的完整参考，请访问我们的Bootstrap JS 轮播参考。


❮ 上一节 下一节 ❯