简要教程
awesome-slider是一款支持移动端的纯js轮播图插件。该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用。
使用方法
安装:
/* yarn */
yarn add awesome-slider
/* npm */
npm install awesome-slider
/* cdn */
<scriptsrc="https://unpkg.com/awesome-slider/dist/awesome-slider.min.js"></script>
使用了requestAnimationFrame, 如果要向低浏览器兼容, 可以自行引入requestAnimationFrame polyfill 比如yarn add raf
基本使用
const AwesomeSlider = require("awesome-slider");
// or
import AwesomeSlider from"awesome-slider";
const awesomeSlider =newAwesomeSlider(images, container, [options]);
API
-
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 元素。
varcontainer1 = 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, 插入图片加载失败的占位。
awesome-slider插件的github网址为:https://github.com/metxnbr/awesome-slider
|