pbTouchSlider 是一款基于 jQuery 的滑動響應式幻燈片插件，它除了一般幻燈片基本的如箭頭控制、圓點控制、縮略圖功能外，還支持響應式設計和滑動控制，同時 pbTouchSlider 還可以針對平板、手機設備分別設置高度，這使得 pbTouchSlider 能夠適應各種設備。
pbTouchSlider 還可以為每個幻燈片添加標題和描述，自帶的樣式還可以讓標題和描述以動畫的方式展示。
使用方法
1、引入文件
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/entypo.css"> <script src="js/jquery.min.js"></script> <script src="js/hammer.min.js"></script> <script src="js/slider.js"></script>
style.css 為插件樣式（有若干修改），entypo.css 為開源字體圖標，主要使用了左右箭頭，hammer.min.js 用于實現滑動拖拽，slider.js 為 pbTouchSlider 插件核心代碼。
2、HTML
<div class="o-sliderContainer hasShadow" id="zztukuWrap"> <div class="o-slider" id="zztuku"> <div class="o-slider--item" data-image="images/5.jpg"></div> <div class="o-slider--item" data-image="images/6.jpg"></div> <div class="o-slider--item" data-image="images/1.jpg"></div> <div class="o-slider--item" data-image="images/2.jpg"></div> <div class="o-slider--item" data-image="images/3.jpg"></div> <div class="o-slider--item" data-image="images/4.jpg"></div> </div> </div>
3、JavaScript
$(function() {
$('#zztuku').pbTouchSlider({
slider_Wrap: '#zztukuWrap'
);
});配置
屬性
| 名稱 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| slider_Wrap | 字符串 | null | 必填，幻燈片的父級元素 |
| slider_Item | 字符串 | .o-slider–item | 必填，幻燈片的父級元素 |
| slider_Drag | 布爾值 | null | 是否可滑動切換 |
| slider_Dots | 對象 | null | 是否顯示圓點 |
| slider_Arrows | 對象 | null | 是否顯示箭頭 |
| slider_Threshold | 整數 | null | |
| slider_Speed | 整數 | null | 切換動畫持續時間 |
| slider_Ease | 字符串 | null | 切換動畫函數 |
| slider_Breakpoints | 對象 | null | 針對不同的設備設置不同高度 |
GitHub 地址：https://github.com/pirolab/pirolab.github.io
