Siema Ca indicator

Question

I'm using the Siema carousel on my site with Zepto. I'd like to be able to indicate what slide the user is currently on. How do I do this if there is only an onChange event available?

HTML

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

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

JS

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

Answer 1

I think I can help (I'm the author of 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

Have a lovely day 🥑