支持移动端的纯js轮播图插件awesome-slider

支持移动端的纯js轮播图插件awesome-slider

awesome-slider是一款支持移动端的纯js轮播图插件。该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用。

使用方法
安装:

1
2
3
4
5
6
7
8
/* yarn */
yarn add awesome-slider
 
/* npm */
npm install awesome-slider
 
/* cdn */
<script src="https://unpkg.com/awesome-slider/dist/awesome-slider.min.js"></script>

使用了requestAnimationFrame, 如果要向低浏览器兼容, 可以自行引入requestAnimationFrame polyfill 比如yarn add raf

基本使用

1
2
3
4
5
const AwesomeSlider = require("awesome-slider");
// or
import AwesomeSlider from "awesome-slider";
 
const awesomeSlider = new AwesomeSlider(images, container, [options]);

API

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
images:轮播图的图片。可以是简单模式,也可以是也可以自由组合模式。
    /* 简单模式 */
    ["./images/1.jpg", "./images/2.jpg", "./images/3.jpg", "./images/4.jpg"];
     
    /* 自由组合模式 */
    [
      {
        tagName: "a",
        attrs: {
          style: "",
          class: "",
          href: "https://wwww.example.com"
        },
        children: [
        "this just textNote, not object",
        {
          tagName: "div",
          attrs: {
          style:""
        },
      },
      "./images/example.jpg"
    ]
    container:包裹 images 的 html 元素。
    var container1 = document.querySelector(".container");
    // react
    ...
    const containerRef = useRef(null);
    ...
    const container1 = containerRef.current;
    ...
    <div className="container1" ref={containerRef}>

配置参数

  • ratio:图片的宽高比。
  • duration:轮播动画过渡的时长(ms)。
  • autoplay:是否开启自动轮播。
  • interval:自动轮播的间隔时长(ms)。
  • indicator:轮播状态的指示 js创建html, 通过有传递的参数做样式交互, 如果要使用this, 就不要使用箭头函数, 一般现有传递的参数够用。
  • initIndex:初始展示的图片的序号。
  • manual:js创建html, 插入两部分, 分别是previous和next。
  • timing:轮播动画类型。
  • enableResize:是否开启窗口大小变化的监听。
  • imageDownloading:js创建html, 插入图片加载的效果。
  • imagePlaceholder:js创建html, 插入图片加载失败的占位。
当前内容只有登录了才能查看,如果您已经注册,请登录
2

发表评论