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

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

淘建站为您提供更多_图片代码_图片轮播_activate，在此特别感谢您对我们的支持与厚爱！

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