Swiper 轮播 · 从零开始的避坑指南

# Swiper Scrollbar使用方法 * * * * * 1. 如需使用Swiper的滚动条首先加载Scrollbar插件 js和css ~~~ <head> <link rel="stylesheet" href="css/idangerous.swiper.css"> <link rel="stylesheet" href="css/idangerous.swiper.scrollbar.css"> <script src="js/idangerous.swiper-2.x.min.js"></script> <script src="js/idangerous.swiper.scrollbar-1.x.js"></script> </head> ~~~ * * * * * 2.加入HTML ~~~ <div class="swiper-container"> //其他HTML内容 </div> <div class="swiper-scrollbar"></div> ~~~ * * * * * 3.设置CSS样式。 ~~~ <style> .swiper-scrollbar { height:10px; margin:20px auto; width: 880px; ... 滚动条的样式... } .swiper-scrollbar-drag { ... 滚动条中可拖动块的样式... } </style> ~~~ * * * * * 4.插入相应代码 ~~~ var mySwiper = new Swiper('.swiper-container',{ //其他设置 scrollbar: { container : '.swiper-scrollbar', draggable : true, hide: true, snapOnRelease: true } }); ~~~