幻灯片/轮播

基于Bootstrap响应式Carousel轮播图插件

创客主机

这是一款基于Bootstrap的响应式Carousel轮播图插件。该轮播图插件在原生Bootstrap Carousel的基础上进行扩展,使轮播图可以更好的布局,以及适应屏幕的尺寸。

使用方法:

在页面中引入bootstrap相关文件和jquery文件。

  1. <link href="path/to/bootstrap.min.css" rel="stylesheet">
  2. <script src="path/to/jquery.min.js"></script>
  3. <script src="path/to/bootstrap.min.js"></script>

然后引入轮播图插件需要的相关文件:

  1. <link rel="stylesheet" type="text/css" href="css/flexible-bootstrap-carousel.css" />
  2. <script type="text/javascript" src="js/flexible-bootstrap-carousel.js"></script>

HTML结构:

该基于Bootstrap的响应式Carousel轮播图的HTML结构如下。

  1. <div class="carousel flexible slide" data-ride="carousel" data-interval="5000" data-wrap="true">
  2.     <div class="items">
  3.         <div class="flex-item">
  4.             <img class="img-responsive" src="images/item1.jpg"/>
  5.         </div>
  6.  
  7.         <div class="flex-item">
  8.             <img class="img-responsive" src="images/item2.jpg"/>
  9.         </div>
  10.  
  11.         <div class="flex-item">
  12.             <img class="img-responsive" src="images/item3.jpg"/>
  13.         </div>
  14.  
  15.         <div class="flex-item">
  16.             <img class="img-responsive" src="images/item4.jpg"/>
  17.         </div>
  18.  
  19.         <div class="flex-item">
  20.             <img class="img-responsive" src="images/item5.jpg"/>
  21.         </div>
  22.  
  23.         <div class="flex-item">
  24.             <img class="img-responsive" src="images/item6.jpg"/>
  25.         </div>
  26.     </div>
  27.  
  28.     <div class="carousel-inner" role="listbox">
  29.  
  30.     </div>
  31.  
  32.     <a class="left carousel-control" href="#simple-content-carousel" role="button" data-slide="prev">
  33.         <span class="fa fa-angle-left" aria-hidden="true"></span>
  34.         <span class="sr-only">Previous</span>
  35.     </a>
  36.     <a class="right carousel-control" href="#simple-content-carousel" role="button" data-slide="next">
  37.         <span class="fa fa-angle-right" aria-hidden="true"></span>
  38.         <span class="sr-only">Next</span>
  39.     </a>
  40.  
  41. </div>

Github地址:https://github.com/DanDevG/flexible-bootstrap-carousel

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!