以下のような矢印ボタンを押すと横からスライドするようなスライダーを作りましたが、クリックの間隔が0.5秒より速いとアニメーションが追い付かなくなるので、その間クリックを受け付けないようにしたいです。何かいい方法はないでしょうか?
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="style.css"> 8</head> 9<body> 10 <ul class="slides"> 11 <li class="slide active" style="background-color:red;">スライド1</li> 12 <li class="slide next-slide" style="background-color:green;">スライド2</li> 13 <li class="slide prev-slide" style="background-color:blue;">スライド3</li> 14 </ul> 15 <div class="button-box space-between-layout"> 16 <div class="change-button prev">前へ</div> 17 <div class="change-button next">次へ</div> 18 </div> 19 20 <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> 21 <script src="scripts/script.js"></script> 22</body> 23</html>
css
1.space-between-layout { 2 display: flex; 3 justify-content: space-between; 4} 5.slides { 6 position: relative; 7 width: 300px; 8 height: 300px; 9 margin: 0 auto; 10 overflow: hidden; 11} 12.slide { 13 list-style: none; 14 width: 100%; 15 height: 100%; 16 position: absolute; 17 top: 0; 18 left: 0; 19 transition: .5s; 20 visibility: hidden; 21} 22.active { 23 transform: translate(0); 24 visibility: visible; 25} 26.prev-slide { 27 transform: translate(-100vw); 28} 29.next-slide { 30 transform: translate(100vw); 31} 32.button-box { 33 width: 300px; 34 margin: 0 auto; 35} 36.change-button:hover { 37 cursor: pointer; 38}
javascript
1$(function() { 2 let flag = 0; 3 let index = 0; 4 $('.change-button').click(function() { 5 let $displaySlide = $('.active'); 6 const slides = $('.slide'); 7 8 slides.eq(index).removeClass('active'); 9 slides.eq((index + 1) % slides.length).removeClass('next-slide'); 10 slides.eq(index - 1).removeClass('prev-slide'); 11 12 $(this).hasClass('next') ? flag++ : flag--; 13 14 index = flag % slides.length; 15 slides.eq(index).addClass('active'); 16 slides.eq((index + 1) % slides.length).addClass('next-slide'); 17 slides.eq(index - 1).addClass('prev-slide'); 18 }) 19})
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。