首页>>焦点图>>pbSlider支持手机端的响应式轮播图 支持显示文字，缩略图预览(2017-06-15)

pbSlider支持手机端的响应式轮播图 支持显示文字，缩略图预览

pbSlider支持手机端的响应式轮播图 支持显示文字，缩略图预览
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class='o-sliderContainer hasShadow ' id="pbSliderWrap3">  
  2.   <div class='o-slider' id='pbSlider3'>  
  3.     <div class="o-slider--item" data-image="../demo1.jpg">  
  4.       <div class="o-slider-textWrap">  
  5.         <h1 class="o-slider-title">This is a title</h1>  
  6.         <span class="a-divider"></span>  
  7.         <h2 class="o-slider-subTitle">This is a sub title</h2>  
  8.       </div>  
  9.     </div>  
  10.     <div class="o-slider--item" data-image="../demo2.jpg">  
  11.       <div class="o-slider-textWrap">  
  12.         <h1 class="o-slider-title">This is a title</h1>  
  13.         <span class="a-divider"></span>  
  14.         <h2 class="o-slider-subTitle">This is a sub title</h2>  
  15.       </div>  
  16.     </div>  
  17.     <div class="o-slider--item" data-image="../demo3.jpg">  
  18.       <div class="o-slider-textWrap">  
  19.         <h1 class="o-slider-title">freejs.net</h1>  
  20.         <span class="a-divider"></span>  
  21.         <h2 class="o-slider-subTitle">专注web前端</h2>  
  22.       </div>  
  23.     </div>  
  24.   </div>  
  25. </div>  

 

JavaScript Code
  1. $('#pbSlider3').pbTouchSlider({  
  2.         slider_Wrap: '#pbSliderWrap3',  
  3.         slider_Threshold: 50 ,  
  4.         slider_Speed:400 ,  
  5.         slider_Ease:'linear',  
  6.         slider_Breakpoints: {  
  7.             default: {  
  8.                 height: 400  
  9.             },  
  10.             tablet: {  
  11.                 height: 300,  
  12.                 media: 1024  
  13.             },  
  14.             smartphone: {  
  15.                 height: 200,  
  16.                 media: 768  
  17.             }  
  18.         }  
  19.         });  

 


原文地址:http://www.freejs.net/article_jiaodiantu_614.html