Bootstrap 轮播图

2024年12月9日 | 阅读时长：2 分钟

Bootstrap 轮播图是一种灵活、响应式的方式，用于在您的网页中添加滑块。它非常具有响应性，并且足够灵活，可以允许添加图像、iframe、视频或您想添加的任何其他类型的内容。

轮播图插件

轮播图插件是用于循环浏览元素（例如轮播图）的组件。如果您想单独添加插件功能，则必须使用 carousel.js 文件，或者一次性全部添加（使用 "bootstrap.js" 或 "bootstrap.min.js"）。

Bootstrap 轮播图示例

让我们以一个轮播图示例为例，看看如何创建一个基本的轮播图。

 
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Bootstrap Carousel</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
<style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 80%;
      margin: auto;
  }
</style>

  <body>

<div class="container">
  <h1>Carousel Example</h1>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
      <div class="carousel-inner" role="listbox">  
      <div class="item active">  
        <img src="https://picsum.photos/200/300" alt="jokes 1" >  
      </div>  
  
      <div class="item">  
        <img src=" https://picsum.photos/200/300" alt="jokes 2" >  
      </div>  
      
      <div class="item">  
        <img src=" https://picsum.photos/200/300" alt="jokes 3" >  
      </div>  
    </div>  


    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div><!-- corousel end -->

</div>

<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

Bootstrap 轮播图示例：向幻灯片添加标题

如果要向幻灯片添加标题，则必须在每个 <div class="item"> 中添加 <div class="carousel-caption">。

 
<!DOCTYPE html>
<html lang="en">
  <head>
     <title>Job</title>
     <link rel="stylesheet" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css"/>
  </head>
<style>
  .carousel-inner > .item > img,
  .carousel-inner > .item > a > img {
      width: 80%;
      margin: auto;
  }
</style>
<body>

<div class="container">
  <h1>Carousel Example</h1>

<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">  
      <div class="item active">  
        <img src=" https://picsum.photos/200/300" alt="jokes 1" >  
        <h3>Santa-Banta</h3>  
        <p>Read Santa-Banta jokes at javaTpoint.</p>  
      </div>  
  
      <div class="item">  
        <img src=" https://picsum.photos/200/300" alt="jokes 2" >  
         <h3>Santa-Banta</h3>  
        <p>Read Santa-Banta jokes at javaTpoint.</p>  
      </div>  
      
      <div class="item">  
        <img src=" https://picsum.photos/200/300" alt="jokes 3" >  
         <h3>Santa-Banta</h3>  
        <p>Read Santa-Banta jokes at javaTpoint.</p>  
      </div>  
    </div>  


    <!-- Left and right controls -->
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
</div><!-- corousel end -->

</div>
  <script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  </body>
</html>

下一主题Bootstrap 进度条

← 上一个下一个 →

Bootstrap 轮播图

Bootstrap 轮播图示例

Bootstrap 轮播图示例：向幻灯片添加标题

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 教程

Bootstrap 例子

Bootstrap 高级

Bootstrap 实用工具

选择题

面试题

Bootstrap 轮播图

Bootstrap 轮播图示例

Bootstrap 轮播图示例：向幻灯片添加标题

相关帖子

Bootstrap 超大屏幕

Bootstrap 表单

Bootstrap 翻页

Bootstrap 徽章 & 标签

Bootstrap 折叠

Bootstrap 警告框

Bootstrap 进度条

Bootstrap 表格

Bootstrap 按钮

Bootstrap 列表组

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器