介绍

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

Github

https://github.com/pawelgrzybek/siema

安装使用

yarn add siema

import Siema from 'siema';
new Siema();

//or
<script src="siema.min.js"></script>
<script>
  new Siema();
</script>

<div class="siema">
  <div>Hi, I'm slide 1</div>
  <div>Hi, I'm slide 2</div>
  <div>Hi, I'm slide 3</div>
  <div>Hi, I'm slide 4</div>
</div>

配置

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（功能）
在换片后运行

基本范例

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

<div class="siema">
  <img src="assets/siema--pink.svg">
  <img src="assets/siema--yellow.svg">
  <img src="assets/siema--pink.svg">
  <img src="assets/siema--yellow.svg">
</div>

<button class="prev">prev</button>
<button class="next">next</button>

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