Siema – 轻量级的轮播图插件

用法

它使用起来非常简单。

HTML

<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>

JS

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

选项

Siema提供了一些（可选）设置，你可以通过将对象作为参数传递更改。默认值如下所示。

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

• selector – （字符串或DOM元素）指定选择器
• duration – （数字）滑动转换持续时间（以ms为单位）
• easing – （字符串）与CSS中的transition-timing-function相同
• perPage – （数字）要显示的幻灯片的数量
• startIndex – （数字）起始滑块的索引（从零开始）
• draggable – （布尔）使用拖动和触摸滑动
• threshold – （数字）触摸和鼠标拖动阈值（以px为单位）
• loop – （布尔）循环幻灯片

API

如上所述，Siema只是几个有用的方法。

• next() – 转到下一张幻灯片
• prev() – 转到上一张幻灯片
• goTo(index) – 转到特定幻灯片
• currentSlide – 当前活动幻灯片的索引（只读）

示例

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

<div class="siema">
  <div><img src="assets/siema--pink.svg"></div>
  <div><img src="assets/siema--yellow.svg"></div>
  <div><img src="assets/siema--pink.svg"></div>
  <div><img src="assets/siema--yellow.svg"></div>
  <div><img src="assets/siema--pink.svg"></div>
  <div><img src="assets/siema--yellow.svg"></div>
</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());

操作演示（视频）