vir-ui-slider

依赖安装

npm

npm install Vir

script 标签

<script src="https://unpkg.com/vir"></script>

安装

npm

npm install vir-ui-slider

script 标签

<script src="https://unpkg.com/vir-ui-slider"></script>
<!-- 全局变量 VirUiSlider -->

基本使用

  <div class="slider">
    <ul>
      <li>
        <!-- lazyload 需要设置 data-src 属性 -->
        <img data-src="n.jpg" src="n.png">
      </li>
      ...
    </ul>
    <a href="javascript:;" class="prev"></a>
    <a href="javascript:;" class="next"></a>
  </div>

const Slider = require('vir-ui-slider')(
  /* 默认选项
    {
      lazyload: false,
      wrapperSelector: 'ul',
      slideSelector: 'ul > li',
      nextSelector: '.next',
      prevSelector: '.prev',
      pagination: {
        selector:'.pagination', // 传值开启 pagination 功能 不依赖结构
        navSelector: 'li',
        currentClass: 'cur'
      }
    }
  */
)

let slider = new Slider({
  el: '.slider'
})
/* 选项 lazyload 为 true 需要手触发首屏显示
slider.set('index', 0, {
  force: true
})
*/

例子

code pen

base