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

使用方法

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

HTML结构

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

  
  

    

    

    

  

  
  

    

      
      

        ...
      
    
    

      
      

        ...
      
    
    ...
  

  
  
    
    Previous
  
  
    
    Next
  

                

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

......
                  
                

此时，轮播图的切换方式为淡入淡出方式。如果你项使用滑动切换方式，可以将fade改为slide。

另外，有几个class类用于控制文本的对齐方式，它们是：slide_style_center, slide_style_left, slide_style_right。

最后，文本的动画都是基于animate.css的，你可以自己进行配置。

初始化插件

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

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

bootstrap-carousel-touch-slider轮播图的github地址为：https://github.com/bootstrapthemesco/bootstrap-carousel-touch-slider