進む、戻るボタンを押したときにもカレントクラスが移動するように修正していきます。
- 関数を作る
- 関数を配置する
関数を作る
・前回まででボタンにクリックイベントをつけてボタンを押すと指定の画像を表示するようにしました。
・ただ、このままだとnextやprevが連動しておらずこれらを押してもカレントクラスを移動することが出来ません。
・今回はこれらの挙動を直していきます。
・まずはカレントクラスをつけ外ししているコードを関数にして他の処理でも使えるようにしていきます。
・functionを使って関数を書いていきましょう。今回名前はupdateDots()としておきましょう。
・こんな感じですね。
function updateDots(){
dots.forEach(dot => {
dot.classList.remove(‘current’);
});
dots[currentIndex].classList.add(‘current’);
}
関数を配置する
・次に関数の配置をしていきます。
・つけ外しする関数なのでボタンをクリックされた時、nextをクリックされた時、prevをクリックされた時にそれぞれ付け外しをしていきます。
・まずはボタンをクリックされた時に先程の関数を実行したいのでボタンをクリックされたらのところにupdateDots();と書いていきます。
・こんな感じですね。
function setupDots() {
for (let i = 0; i < slides.length; i++) {
const button = document.createElement(‘button’);
button.addEventListener(‘click’, () => {
currentIndex = i;
updateDots();
updateButtons();
moveSlides();
});
dots.push(button);
document.querySelector(‘nav’).appendChild(button);
}
dots[0].classList.add(‘current’);
・次にnextとところでもつけ外しをしたいので、nextをクリックされたときにもupdateDots();を書いていきます。
・最後にprevでもつけ外しをしたいのでprevをクリックさてれたときにもupdateDots();を書いていきましょう。
・これでボタンやnext,prevをクリックされたらカレントクラスが指定の位置に移動してくれます。
・nextとprevはこんな感じになります。
next.addEventListener(‘click’, () => {
currentIndex++;
updateButtons();
updateDots();
moveSlides();
});
prev.addEventListener(‘click’, () => {
currentIndex–;
updateButtons();
updateDots();
moveSlides();
});
