
本分分享为Swiper 增加垂直滚动条效果, Swiper 是一款免费以及轻量级的移动设备触控滑块的js框架,使用硬件加速过渡(如果该设备支持的话)。主要使用于移动端的网站、移动web apps,native apps和hybrid apps。主要是为IOS而设计的,同时,在Android、WP8系统也有着良好的用户体验,Swiper从3.0开始不再全面支持PC端。因此,如需在PC上兼容更多的浏览器,可以选择Swiper2.x(甚至支持IE7)。
主要js与解释
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="js/swiper.min.js" type="text/javascript"></script> <script> var swiper = new Swiper(".swiper-sider", { //Swiper的滑动方向,可设置为水平方向切换 horizontal 或垂直方向切换 vertical 。 direction: "vertical", //设置slider容器能够同时显示的slides数量 slidesPerView: "auto", //启用自由模式功能。 freeMode: true, //为Swiper增加滚动条。 scrollbar: { //Scrollbar容器的css选择器或HTML元素。 el: ".swiper-scrollbar", }, //开启鼠标滚轮控制Swiper切换。 mousewheel: true, }); </script>