@wanyanyan/slider.js NPM

介绍

一个简单的轮播组件，纯js实现，不依赖任何前端框架。

使用方法

在使用slider.js之前，应该确保html页面有如下Dom结构，'container'为轮播组件的容器，不要改变其子元素的class和结构。

<div id="container">
  <div class="sld-viewport">
    <div class="sld-wrapper">
      <div class="sld-item">
        <!-- your content -->
      </div>
      <div class="sld-item">
        <!-- your content -->
      </div>
    </div>
  </div>
</div>

通过cdn引入

<script src="/dist/slider.min.js"></script>

<script>
  const slider = new sliderjs.Slider({
    container: 'container',
    visible_items: 1
  })
</script>

通过npm

npm install @wanyanyan/slider.js

import {Slider} from '@wanyanyan/slider.js'
const slider = new Slider({
  container: 'container',
  visible_items: 1
})

API

new sliderjs.Slider(options)会初始化轮播组件并返回一个Slider实例。options选项：

选项	类型	功能
container	String \| HTMLElement	指定轮播组件的容器
visible_items	Number	可见的条目数 - 默认：`1`
scrolling_items	Number	一次滚动的条目数 - 默认： `1`
orientation	String	滚动方向，"horizontal"或者"vertical" - 默认： `horizontal`
autoplay	boolean	是否自动开始滚动 - 默认： `true`
interval	Number	每次滚动间隔，单位：ms - 默认：`3000`
onClick	Function	点击事件的回调函数，事件参数为{index: 0, originalEvent: mouseEvent} - 默认：`null`