カルーセルプラグインSiema.jsでインジケーターを点灯させたい

Question

Siema.jsでカルーセルを実装しています。 perPage: 2 loop: true オプションを加えると、インジケーター（ページネーション）の最後の一つが点灯しなくなってしまいます。
どのようにすれば最後の一つのインジケーターを点灯させられるでしょうか？

サンプルコード

<div class="siema">
  <img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" />
  <img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" />
  <img src="https://pawelgrzybek.com/siema/assets/siema--pink.svg" alt="Siema image" />
  <img src="https://pawelgrzybek.com/siema/assets/siema--yellow.svg" alt="Siema image" />
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>

class SiemaWithDots extends Siema {

    addDots() {
        this.dots = document.createElement('div');
        this.dots.classList.add('dots');
        for (let i = 0; i < this.innerElements.length; i++) {
            const dot = document.createElement('button');
            dot.classList.add('dots__item');
            dot.addEventListener('click', () => {
                this.goTo(i);
            })
            this.dots.appendChild(dot);
        }
        this.selector.parentNode.insertBefore(this.dots, this.selector.nextSibling);
    }

    updateDots() {
        for (let i = 0; i < this.dots.querySelectorAll('button').length; i++) {
            const addOrRemove = this.currentSlide === i ? 'add' : 'remove';
            this.dots.querySelectorAll('button')[i].classList[addOrRemove]('dots__item--active');
        }
    }
}


const mySiemaWithDots = new SiemaWithDots({
    perPage: 2,
    loop: true,
    onInit: function() {
        this.addDots();
        this.updateDots();
    },
    onChange: function() {
        this.updateDots()
    },
});
setInterval(() => mySiemaWithDots.next(), 2000);
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');

prev.addEventListener('click', () => mySiemaWithDots.prev());
next.addEventListener('click', () => mySiemaWithDots.next());

Answer 1

this.currentSlideが-1になっていることがあるようです。
なので、const addOrRemove = (this.currentSlide+4)%4 === i ? 'add' : 'remove';とかどうでしょうか。

Comments

[hibikikudo]

ありがとうございます。

[Lhankor_Mhy]

なかなか手厳しいですね……

[hibikikudo]

teratailでは自己解決法を記入するとそれが自動的にベストアンサーになってしまうのですね。せっかく
Lhankor_Mhyさんにご回答いただいたのに、私が仕様に詳しくなく申し訳ありません。

[Lhankor_Mhy]

あ、いえ、こちらこそすみませんでした。

Answer 2

Lhankor_Mhyさんのご回答で解決できました。数字部分を変数化して下記のようになりました。ありがとうございました。

updateDots() {
        for (let i = 0; i < this.dots.querySelectorAll('button').length; i++) {
            const addOrRemove = this.currentSlide === i ? 'add' : 'remove';
            this.dots.querySelectorAll('button')[i].classList[addOrRemove]('dots__item--active');
        }
    }

↓

updateDots() {
 let buttonLength = this.dots.querySelectorAll('button').length
        for (let i = 0; i < buttonLength; i++) {
            const addOrRemove = (this.currentSlide+buttonLength)%buttonLength === i ? 'add' : 'remove';
            this.dots.querySelectorAll('button')[i].classList[addOrRemove]('dots__item--active');
        }
    }