実現したいこと
prev・nextボタンを押して左右に画像を切り替えるスライダーを実装しました。しかし、prevやnextボタンを連続でクリックされないようにする処理が実装できずに困っています。
調べたこと
インターネットにてjavscriptの連続クリック防止に関する記事を一通り確認しました。「disabled」を使いボタンを活性・非活性にするというページがいくつか出てきたのですが、調べてみるとinputタグやbuttonタグに使用する物のようでした。
自分が作ったコードでは画像を切り替えるボタンはpタグで実装したため、うまく参考にすることができず詰まってしまっている状態です
画像を切り替える際にaddeventlistenerのclickイベントを使っているのですが、代案としてsetTimeoutを応用できないかということも考えたのですが、他にいい方法があればお知恵を拝借したく質問させていただきました。
該当のソースコード
<div id="slider"> <div id="slider-contents"> <div class="slider-item1" id="item1">1</div> <div class="slider-item1" id="item2">2</div> <div class="slider-item1" id="item3">3</div> <div class="slider-item1" id="item4">4</div> <div class="slider-item1" id="item5">5</div> </div> <div id="btn"> <p id="prev">prev</p> <p id="next">next</p> </div> </div>
html { font-size: 100%; } img { max-width: 100%; } * { box-sizing: border-box; outline: 1px solid magenta; } body { margin: 0; padding: 0; } #btn { display: flex; justify-content: space-around; } #prev, #next { width: 40%; text-align: center; background-color: silver; } #item1 { background-color: red;} #item2 { background-color: blue;} #item3 { background-color: green;} #item4 { background-color: yellow;} #item5 { background-color: purple;} /*----------------------------------------------------------------------------*/ #slider { overflow: hidden; } #slider-contents { background-color: pink; display: flex; overflow: hidden; width: 1200px; margin: 0 auto; } #item1, #item2, #item3, #item4, #item5 { height: 450px; min-width: 450px; margin-right: 40px; line-height: 450px; text-align: center; font-size: 50px; } .slider-item1 { transform: translateX(-605px); transition: all 1s ease 0s; } .slider-item2 { transform: translateX(-1095px); transition: all 1s ease 0s; } .slider-item3 { transform: translateX(-1585px); transition: all 1s ease 0s; } .slider-item4 { transform: translateX(-2075px); transition: all 1s ease 0s; } .slider-item5 { transform: translateX(-2565px); transition: all 1s ease 0s; } .slider-item1_copy { transform: translateX(-3055px); transition: all 1s ease 0s; } .slider-item1_return { transform: translateX(-605px); transition: all 0s ease 0s; } .slider-item5_copy { transform: translateX(-115px); transition: all 1s ease 0s; } .slider-item5_return { transform: translateX(-2565px); transition: all 0s ease 0s; }
const item1 = document.getElementById('item1'); const item5 = document.getElementById('item5'); const item2 = document.getElementById('item2'); const item4 = document.getElementById('item4'); // itemの複製 let item5_copy = item5.cloneNode(true); let item1_copy = item1.cloneNode(true); let item2_copy = item2.cloneNode(true); let item4_copy = item4.cloneNode(true); // item1の前、item5の後、複製item1の後に複製したitemを表示 item1.before(item5_copy); item5.after(item1_copy); item1_copy.after(item2_copy); item5_copy.before(item4_copy); /*----------------------------------------------------------------------------*/ // prevとnextの切り替えのボタン const prev = document.getElementById('prev'); const next = document.getElementById('next'); // slider-contents内にあるdivタグを取得 let sliderContents = document.getElementById('slider-contents'); let slider = sliderContents.getElementsByTagName('div') next.addEventListener('click', () => { for (let i = 0; i < slider.length; i++) { if (slider[i].classList.contains('slider-item1') === true) { slider[i].classList.remove('slider-item1'); slider[i].classList.add('slider-item2'); } else if (slider[i].classList.contains('slider-item2') === true) { slider[i].classList.remove('slider-item2'); slider[i].classList.add('slider-item3'); } else if (slider[i].classList.contains('slider-item3') === true) { slider[i].classList.remove('slider-item3'); slider[i].classList.add('slider-item4'); } else if (slider[i].classList.contains('slider-item4') === true) { slider[i].classList.remove('slider-item4'); slider[i].classList.add('slider-item5'); } else if (slider[i].classList.contains('slider-item5') === true) { slider[i].classList.remove('slider-item5'); slider[i].classList.add('slider-item1_copy'); setTimeout( () => { slider[i].classList.remove('slider-item1_copy'); slider[i].classList.add('slider-item1_return'); }, 1000); } else if (slider[i].classList.contains('slider-item1_return') === true) { slider[i].classList.remove('slider-item1_return'); slider[i].classList.add('slider-item2'); } } }) prev.addEventListener('click', () => { for (let i = 0; i < slider.length; i++) { if (slider[i].classList.contains('slider-item5') === true) { slider[i].classList.remove('slider-item5'); slider[i].classList.add('slider-item4'); } else if (slider[i].classList.contains('slider-item4') === true) { slider[i].classList.remove('slider-item4'); slider[i].classList.add('slider-item3'); } else if (slider[i].classList.contains('slider-item3') === true) { slider[i].classList.remove('slider-item3'); slider[i].classList.add('slider-item2'); } else if (slider[i].classList.contains('slider-item2') === true) { slider[i].classList.remove('slider-item2'); slider[i].classList.add('slider-item1'); } else if (slider[i].classList.contains('slider-item1') === true) { slider[i].classList.remove('slider-item1'); slider[i].classList.add('slider-item5_copy'); setTimeout( () => { slider[i].classList.remove('slider-item5_copy'); slider[i].classList.add('slider-item5_return'); }, 1000); } else if (slider[i].classList.contains('slider-item5_return') === true) { slider[i].classList.remove('slider-item5_return'); slider[i].classList.add('slider-item4'); } } })
回答1件
あなたの回答
tips
プレビュー