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

简要教程

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