Swiper 增加垂直滚动条效果
  • 分享到微信朋友圈
    X
立即下载 查看演示

本分分享为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>