幻灯片插件管制免费素材下载 pbTouchSlider

pbTouchSlider 是一款基于 jquery 的滑动呼应式幻灯片插件，它除了了普通幻灯片根本的如箭头管制、圆点管制、缩略图性能外，还支持呼应式设计以及滑动管制，同时 pbTouchSlider 还能够针对平板、手机设施辨别设置高度，这使患上 pbTouchSlider 可以顺应各类设施。pbTouchSlider 还能够为每一个幻灯片增加题目以及形容，自带的款式还能够让题目以及形容以动画的形式展现。

阅读器兼容

一、引入文件

<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/entypo.css">
<script src="js/jquery.min.js"></script>
<script src="js/ha妹妹er.min.js"></script>
<script src="js/slider.js"></script>

style.css 为插件款式（有若干修正），entypo.css 为开源字体图标，次要应用了阁下箭头，ha妹妹er.min.js 用于完成滑动拖拽，slider.js 为 pbTouchSlider 插件外围代码。

二、HTML

<div class="o-sliderContainer hasShadow" id="dowebokWrap">
    <div class="o-slider" id="dowebok">
        <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>

三、JavaScript

$(function() {
    $('#dowebok').pbTouchSlider({
        slider_Wrap: '#dowebokWrap'
    );
});

属性

GitHub 地点：https://github.com/pirolab/pirolab.github.io

jQuery幻灯片插件owlcarousel参数阐明中文文档