スライダーのスライドをめくる間隔を指定したい

以下のような矢印ボタンを押すと横からスライドするようなスライダーを作りましたが、クリックの間隔が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;">スライド１</li>
12      <li class="slide next-slide" style="background-color:green;">スライド２</li>
13      <li class="slide prev-slide" style="background-color:blue;">スライド３</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})

行動規範の内容に同意します

回答1件

やってみたらそれっぽい動きになったものを載せておきます。
ボタンを押せなくする&transition終了後に元に押せるように戻すという感じでやってみました。

ボタン押せなくして、0.5病後に押せるようにするとかでも問題ないかと思います。

jQuery
1$(function() {
2   let flag = 0;
3   let index = 0;
4   $('.change-button').click(function() {
5      $(".change-button").css("pointer-events", "none");
6
7      let $displaySlide = $('.active');
8      const slides = $('.slide');
9      slides.eq(index).removeClass('active');
10      slides.eq((index + 1) % slides.length).removeClass('next-slide');
11      slides.eq(index - 1).removeClass('prev-slide');
12
13      $(this).hasClass('next') ? flag++ : flag--;
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
20   var transitionEndEvents = [
21      "webkitTransitionEnd",
22      "mozTransitionEnd",
23      "oTransitionEnd",
24      "transitionend"
25  ];
26  var transitionEnd = transitionEndEvents.join(" ");
27
28  $(".slide").on(transitionEnd, function() {
29      $(".change-button").css("pointer-events", "auto");
30  });
31})