Siema Ca指示剂答案

【问题标题】：Siema Ca indicatorSiema Ca指示剂
【发布时间】：2018-04-05 10:26:02
【问题描述】：

我正在使用 Zepto 在我的网站上使用 Siema carousel。我希望能够指出用户当前在哪张幻灯片上。如果只有 onChange 事件可用，我该怎么做？

HTML

<section class="images">
   <img/>
   <img/>
</section>

<section class="indicators">
   <span class="active"></span>
   <span></span>
</section>

$(document).ready(function() {
  new Siema({
    selector: '.images',
    onChange: () => {
      console.log("swiped");
      // change active indicator?
    },
  });
});

【问题讨论】：

在Siema carousel 的 API 部分查看当前幻灯片。这应该有一个你正在寻找的行为的例子。

标签： javascript zepto siema

【解决方案1】：

我想我可以帮忙（我是 Siema 的作者）。

// extend a Siema class and add addDots() & updateDots() methods
const mySiemaWithDots = new SiemaWithDots({

  // on init trigger method created above
  onInit: function(){
    this.addDots();
    this.updateDots();
  },

  // on change trigger method created above
  onChange: function(){
    this.updateDots()
  },

});

https://codepen.io/pawelgrzybek/pen/boQQWy

祝你有美好的一天?

【讨论】：