awesome-slider是一款支持移动端的纯js轮播图插件。该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用。
使用方法
安装:
/* 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
基本使用
const AwesomeSlider = require("awesome-slider"); // or import AwesomeSlider from "awesome-slider"; const awesomeSlider = new AwesomeSlider(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 元素。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, 插入图片加载失败的占位。
awesome-slider插件的github网址为:https://github.com/metxnbr/awesome-slider
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!