bpHS.js+bootstrap响应式触屏滑动幻灯片

本文演示了bpHS.js+bootstrap +touchSwipe触屏滑动的幻灯片，而且支持键盘上一页、下一页效果。只有在arrowKeys在37或39的时候触发，即键盘左右箭头，当然你也可以设定上下箭头翻阅，修改在bpHS.js75行。

分类：图片代码 > 图片轮播难易：初级

查看演示下载资源下载积分： 20 积分

幻灯片html

<div class="bp-hs" id="demo-default">
    <div class="bp-hs_inner">
        <div class="bp-hs_inner__item" data-transform="scale">
            <a href='http://www.sucaihuo.com/js/130.html' target='_blank'> <img src='img/01.jpg' alt='jQuery侧面浮动对联广告' /> </a>
        </div>
        <div class="bp-hs_inner__item" data-transform="scale">
            <a href='http://www.sucaihuo.com/js/131.html' target='_blank'> <img src='img/02.jpg' alt='jQuery分步式动画进度条' /> </a>
        </div>
        <div class="bp-hs_inner__item" data-transform="scale">
            <a href='http://www.sucaihuo.com/js/132.html' target='_blank'> <img src='img/03.jpg' alt='jQueryQQ商城焦点图自动切换' /> </a>
        </div>
        <div class="bp-hs_inner__item" data-transform="scale">
            <a href='http://www.sucaihuo.com/js/133.html' target='_blank'> <img src='img/02.jpg' alt='jQuery选项卡搜索框切换' /> </a>
        </div>
    </div>
</div>

引入触屏插件touchSwipe和bpHS.js

<script src="js/vendors/jquery.touchSwipe.min.js"></script>
<script src="js/bpHS.js" type="text/javascript"></script>

$('#demo-default').bpHS({
    nextText: '<i class="fa fa-angle-right"></i>',
    prevText: '<i class="fa fa-angle-left"></i>',
    autoPlay: false
});

bpHS.jsAPI参数

参数	描述	默认值
activate	初始化索引	0
touchSwipe	是否触屏滑动	true
nextText	下一页文字	-
prevText	上一页文字	-
showControls	是否显示控制按钮	true
showButtons	是否显示分页按钮	true
autoPlay	是否自动播放	false
arrowKeys	是否支持键盘左右翻阅上一页、下一页	false