幻灯片/轮播

基于Bootstrap支持移动端轮播图效果

创客主机


bootstrap-carousel-touch-slider是一款基于Bootstrap支持移动端的响应式轮播图效果。该轮播图特效可以使用手指进行滑动切换。并且它和animate.css结合,可以制作出各种炫酷的文字动画效果。

使用方法:

在页面中引入bootstrap相关文件,font-awesome.css字体图标文件,animate.min.css动画文件,以及jquery.touchSwipe.min.js文件。

  1. <link href="path/to/bootstrap.min.css" rel="stylesheet">
  2. <link href="path/to/font-awesome.min.css" rel="stylesheet">
  3. <link href="path/to/animate.min.css" rel="stylesheet">
  4.  
  5. <script src="path/to/jquery.min.js"></script>
  6. <script src="path/to/bootstrap.min.js"></script>
  7. <script src="path/to/jquery.touchSwipe.min.js"></script>

HTML结构:

该轮播图采用标准的Bootstrap Carousel作为HTML结构。一个基本的Bootstrap Carousel的HTML结构如下:

  1. <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  2.   <!-- Indicators -->
  3.   <ol class="carousel-indicators">
  4.     <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
  5.     <li data-target="#carousel-example-generic" data-slide-to="1"></li>
  6.     <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  7.   </ol>
  8.  
  9.   <!-- Wrapper for slides -->
  10.   <div class="carousel-inner" role="listbox">
  11.     <div class="item active">
  12.       <img src="..." alt="...">
  13.       <div class="carousel-caption">
  14.         ...
  15.       </div>
  16.     </div>
  17.     <div class="item">
  18.       <img src="..." alt="...">
  19.       <div class="carousel-caption">
  20.         ...
  21.       </div>
  22.     </div>
  23.     ...
  24.   </div>
  25.  
  26.   <!-- Controls -->
  27.   <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
  28.     <span class="glyphicon glyphicon-chevron-left"></span>
  29.     <span class="sr-only">Previous</span>
  30.   </a>
  31.   <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
  32.     <span class="glyphicon glyphicon-chevron-right"></span>
  33.     <span class="sr-only">Next</span>
  34.   </a>
  35. </div>

修改之后,最外层的包裹div元素的class类如下:

  1. <div id="bootstrap-touch-slider"
  2.          class="carousel bs-slider fade  control-round indicators-line"
  3.          data-ride="carousel"
  4.          data-pause="hover"
  5.          data-interval="5000" >
  6. ......
  7. </div>

此时,轮播图的切换方式为淡入淡出方式。如果你项使用滑动切换方式,可以将fade改为slide。另外,有几个class类用于控制文本的对齐方式,它们是:slide_style_center, slide_style_left, slide_style_right。最后,文本的动画都是基于animate.css的,你可以自己进行配置。

初始化插件:

在页面DOM元素加载完毕之后,可以通过bsTouchSlider()方法来初始化该轮播图。

  1. $('#bootstrap-touch-slider').bsTouchSlider();

Github地址:https://github.com/bootstrapthemesco/bootstrap-carousel-touch-slider

(0)

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

阿里云

热评文章

发表评论

嘿,欢迎咨询!