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
    }
  });

4.你可以参考这个小示例，或查看参数解析。