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

收藏

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

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

幻灯片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.erdangjiade.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.erdangjiade.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.erdangjiade.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.erdangjiade.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参数