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

PetitQ 幻灯片/轮播 2019-6-21 2.47K 0 0

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

使用方法

<script src="https://unpkg.com/awesome-slider/dist/awesome-slider.min.js"></script>

也想出现在这里？联系我们吧

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

const AwesomeSlider = require("awesome-slider");

import AwesomeSlider from "awesome-slider";

const awesomeSlider = new AwesomeSlider(images, container, [options]);

images：轮播图的图片。可以是简单模式，也可以是也可以自由组合模式。

["./images/1.jpg", "./images/2.jpg", "./images/3.jpg", "./images/4.jpg"];

container：包裹 images 的 html 元素。

var container1 = document.querySelector(".container");

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, 插入图片加载失败的占位。