Siema 是一个轻量级(压缩后只有1kb)的 javascript 轮播插件,没有依赖也没有初始样式(需要自己添加样式)。支持IE10、Chrome 12、Firefox 16、Opera 15、Safari 4、Android Browser 4.0、iOS Safari 6.0。

用法

它使用起来非常简单。

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());

操作演示(视频)