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


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

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

基本使用

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, 插入图片加载失败的占位。
1、本站所有资源仅供学习与参考,请勿用于商业用途,如有侵犯您的版权,请及时联系客服QQ27543711,我们将尽快处理。
2、如果在本站付款后未出现下载链接或者下载存在问题请联系客服。【客服QQ:27543711】
3、如果用户购买源码后且源码存在无法安装类根本性问题请联系客服进行退款。
4、【重要】添加客服QQ的时候麻烦备注下来意,防止误忽略。
汇码网 » 支持移动端的纯js轮播图插件awesome-slider