jquery支持移动手机的响应式轮播图插件

这是一款支持移动手机的响应式jquery轮播图插件。它具有跨平台，响应式，支持移动设备等特点，并且在使用CSS3制作过渡动画，效果非常炫酷。

在线预览   下载

 使用方法

在页面中引入jquery，hammer.min.js和slider.js文件以及图标样式文件entypo.css和CSS3动画样式文件style.css。

< link href="path/to/css/style.css" rel="stylesheet">
< link href="path/to/css/entypo.css" rel="stylesheet">
< script src=""path/to/js/jquery.min.js">
< script src=""path/to/js/hammer.min.js">
< script src=""path/to/js/slider.js">

 HTML结构

该jquery轮播图的基本HTML结构如下：

< div class='o-sliderContainer hasShadow' id="yourId">
    < div class='o-slider' id='pbSlider'>
      < div class="o-slider--item" data-image="images/5.jpg">
        < div class="o-slider-textWrap">
          < h1 class="o-slider-title">This is a title
          < span class="a-divider">
          < h2 class="o-slider-subTitle">This is a sub title
          < span class="a-divider">
          < p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph 
                
      
      < div class="o-slider--item" data-image="images/6.jpg">
        < div class="o-slider-textWrap">
          < h1 class="o-slider-title">This is a title
          < span class="a-divider">
          < h2 class="o-slider-subTitle">This is a sub title
          < span class="a-divider">
          < p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph 
        
      
      < div class="o-slider--item" data-image="images/1.jpg">
        < div class="o-slider-textWrap">
          < h1 class="o-slider-title">This is a title
          < span class="a-divider">
          < h2 class="o-slider-subTitle">This is a sub title
          < span class="a-divider">
          < p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph 
        
      
      < div class="o-slider--item" data-image="images/2.jpg">
        < div class="o-slider-textWrap">
          < h1 class="o-slider-title">This is a title
          < span class="a-divider">
          < h2 class="o-slider-subTitle">This is a sub title
          < span class="a-divider">
          < p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph 
        
      
      < div class="o-slider--item" data-image="images/3.jpg">
        < div class="o-slider-textWrap">
          < h1 class="o-slider-title">This is a title
          < span class="a-divider">
          < h2 class="o-slider-subTitle">This is a sub title
          < span class="a-divider">
          < p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph 
        
      
      < div class="o-slider--item" data-image="images/4.jpg">
        < div class="o-slider-textWrap">
          < h1 class="o-slider-title">This is a title
          < span class="a-divider">
          < h2 class="o-slider-subTitle">This is a sub title
          < span class="a-divider">
          < p class="o-slider-paragraph">
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph This is a sub paragraph 
          This is a sub paragraph 
        
      
    
  

 初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该jquey轮播图插件。

$( '#pbSlider0' ).pbTouchSlider({
    slider_Wrap :  '#yourId' ,  // Assign a unique ID to the div.o-sliderContainer
    slider_Item :  '.o-slider--item' ,  // Single Item
    slider_Drag :  true ,  // Your choise.. to dragIt or not to dragIt..this is the question...
    slider_Dots : {  // Wanna see dots or not?
      class : '.o-slider-pagination' ,
      enabled :  true
    },
    slider_Arrows : {  // Wanna see Arrows or not?
      class : '.o-slider-arrows' ,
      enabled :  true
    },
    slider_Threshold : 25,  // Percentage of  dragX before go to next/prev slider
    slider_Speed : 1000,
    slider_Ease :  'cubic-bezier(0.5, 0, 0.5, 1)' ,   // see http://cubic-bezier.com/
    slider_Breakpoints : {  // Kind of media queries ( can add more if you know how to do it :D and if you need )
        default : {
            height : 500  //  height on desktop
        },
        tablet : {
            height : 400,  // height on tablet
            media : 1024  // tablet breakpoint
        },
        smartphone : {
            height : 300,  // height on smartphone
            media : 768  // smartphone breakpoint
        }
    }
});