react 引入轮播插件_轻巧无依赖，Javascript简单的轮播插件——Siema

介绍

Siema是一个轻量级(仅压缩后的3kb)轮播插件，没有依赖项，没有样式。它是100％开源的，可在Github上查看源代码。它可免费用于个人和商业项目。可以通过模块化的方案或者手动引入js的方式进行使用。

---

---

Github

https://github.com/pawelgrzybek/siema

安装使用

yarn add siemaimport Siema from 'siema';new Siema();//or

Hi, I'm slide 1

Hi, I'm slide 2

Hi, I'm slide 3

Hi, I'm slide 4

配置

Siema带有一些(可选)设置，可以通过将对象作为参数传递来更改，默认值如下所示：

new Siema({  selector: '.siema',  duration: 200,  easing: 'ease-out',  perPage: 1,  startIndex: 0,  draggable: true,  multipleDrag: true,  threshold: 20,  loop: false,  rtl: false,  onInit: () => {},  onChange: () => {},});

selector(字符串或DOM元素)
用作轮播的选择器。Siema将使用此选择器的所有直接子级作为滑块项。

duration(数字)
幻灯片转换持续时间(以毫秒为单位)

easing(字符串)
就像CSS一样transition-timing-function-描述加速度曲线

perPage(数量或对象)
要显示的幻灯片数量。对于复杂的响应式布局，它接受数字或对象。

startIndex(数字)
起始幻灯片的索引(从零开始)

draggable(布尔值)
使用拖动和触摸滑动

multipleDrag(布尔值)
允许拖动以移动多张幻灯片。

threshold(数字)
触摸和鼠标拖动阈值(以像素为单位)

loop(布尔值)
环绕幻灯片

rtl(布尔值)
启用从右到左书写的语言(例如希伯来语或阿拉伯语)的布局

onInit(函数)
在初始化后立即运行

onChange(功能)
在换片后运行

基本范例

具有下一个和上一个按钮的基本轮播

prevnext

const mySiema = new Siema();document.querySelector('.prev').addEventListener('click', () => mySiema.prev());document.querySelector('.next').addEventListener('click', () => mySiema.next());

浏览器支持

• IE10
• Chrome 12
• Firefox 16
• Opera 15
• Safari 5.1
• Android Browser 4.0
• iOS Safari 6.0

总结

Siema只是一个简单的轮播图插件，在某些情况下是很好用的(特别是还要兼用较低版本浏览器的情况下)，没有样式入侵，完全自定义，需要的朋友可以拿下！