自作スライダー完全解説！jQueryを活用してスライダーを実装する方法とメリット

<!-- スライダー全体のラッパー -->
<div class="slider">
  <!-- スライダーの表示領域 -->
  <div class="slider-viewport">
    <!-- トラック全体の幅を設定 -->
    <div class="slider-track-wrapper">
      <!-- トラック全体の初期位置を設定 -->
      <div class="slider-track-offset">
        <!-- トラック位置の調整やスライドのアニメーションを補助 -->
        <div class="slider-track">
          <!-- スライド要素を横並びに配置し、実際に移動する部分 -->
          <div class="slider-items">
            <!-- 各スライド -->
            <div class="slider-slide">
              <div class="slider-image"><img src="images/slider_photo01.webp" alt="木製の歩道が静かな自然の中に広がっている風景"></div>
              <p class="slider-text">自然豊かな環境の中に広がる木製の歩道。<br class="only-pc">緑の中を静かに進むその道は、心を落ち着かせる穏やかな雰囲気を漂わせています。</p>
            </div>
            <div class="slider-slide">
              <div class="slider-image"><img src="images/slider_photo02.webp" alt="ラウンジチェアとヤシの木が並ぶ芝生の風景"></div>
              <p class="slider-text">ヤシの木が並ぶ芝生のエリアには、ラウンジチェアが設置され、<br class="only-pc">リラックスできる空間が広がっています。</p>
            </div>
            <div class="slider-slide">
              <div class="slider-image"><img src="images/slider_photo03.webp" alt="雪に覆われた斜面にあるスキーリフトの風景"></div>
              <p class="slider-text">雪に覆われた斜面をゆっくりと上るスキーリフト。<br class="only-pc">白銀の世界に溶け込むその風景は、ウィンタースポーツの楽しさを感じさせてくれます。</p>
            </div>
            <div class="slider-slide">
              <div class="slider-image"><img src="images/slider_photo04.webp" alt="夕日を浴びる山を背景にしたプールの静かな風景"></div>
              <p class="slider-text">夕日が山を赤く染める中、静けさに包まれたプールが広がる風景。<br class="only-pc">自然と一体となったこの空間は、日常を忘れさせる贅沢なひとときを提供します。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- 矢印ナビゲーション（前後のスライドに移動） -->
  <div class="slider-nav">
    <button type="button" aria-label="前のスライドへ"></button>
    <button type="button" aria-label="次のスライドへ"></button>
  </div>
  <!-- インジケーター（スライド位置を示すボタン） -->
  <div class="slider-indicators"></div>
</div>

/* ======================== */
/* レスポンシブ対応：モバイル向け調整 */
/* ======================== */
/* PC専用の改行タグを非表示にする（モバイル向けの視覚調整） */
@media screen and (max-width: 767px) {
  br.only-pc {
    display: none;
  }
}

/* ======================== */
/* スライダー全体のスタイル */
/* ======================== */
.slider {
  position: relative;
  overflow: hidden;
  visibility: hidden;
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
}

/* スライダーの表示領域（インタラクション無効化） */
.slider-viewport {
  pointer-events: none;
}

/* スライダーのトラック（スライドを横並びに配置） */
.slider-items {
  display: flex;
}

/* 各スライドを均等幅に設定 */
.slider-slide {
  flex: 1;
}

/* ======================== */
/* スライド内の画像のスタイル */
/* ======================== */
/* スライド内の画像を比率固定で表示 */
.slider-image {
  position: relative;
  aspect-ratio: 1480/832;
}
.slider-image img {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ======================== */
/* スライドテキストのスタイル */
/* ======================== */
.slider-text {
  line-height: 1.8;
}
@media print, (min-width: 768px) {
  .slider-text {
    margin-top: 20px;
    font-size: 16px;
    text-align: center;
  }
}
@media screen and (max-width: 767px) {
  .slider-text {
    margin-top: 15px;
    font-size: 15px;
  }
}

/* ======================== */
/* 矢印ナビゲーションのスタイル */
/* ======================== */
/* 矢印ボタンのサイズ調整 */
.slider-nav button {
  display: block;
  position: absolute;
  top: 0;
  margin: 28.10811% 0 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}
@media print, (min-width: 768px) {
  .slider-nav button {
    width: 60px;
    height: 60px;
    transform: translateY(-30px);
  }
}
@media screen and (max-width: 767px) {
  .slider-nav button {
    width: 50px;
    height: 50px;
    transform: translateY(-25px);
  }
}

/* 矢印アイコンのスタイル */
.slider-nav button::before {
  content: '';
  display: block;
  position: absolute;
  top: 50%;
  background: #fff;
  -webkit-mask: url(../images/slider_arrow.svg) 0 0/contain no-repeat;
          mask: url(../images/slider_arrow.svg) 0 0/contain no-repeat;
  transition: background-color 300ms cubic-bezier(.215, .61, .355, 1);
}
@media print, (min-width: 768px) {
  .slider-nav button::before {
    width: 25px;
    height: 20px;
    margin-top: -10px;
  }
}
@media screen and (max-width: 767px) {
  .slider-nav button::before {
    width: 19px;
    height: 15px;
    margin-top: -7.5px;
  }
}

/* 矢印ボタンのホバー・アクティブ状態のスタイル */
@media print, (min-width: 768px) {
  .slider-nav button:hover::before,
  .slider-nav button:active::before {
    background: #c11a51;
  }
}

/* 左矢印ボタンのスタイル */
.slider-nav button:nth-child(1) {
  left: 0;
}
.slider-nav button:nth-child(1)::before {
  transform: scaleX(-1);
}
@media print, (min-width: 768px) {
  .slider-nav button:nth-child(1)::before {
    left: 15px;
  }
}
@media screen and (max-width: 767px) {
  .slider-nav button:nth-child(1)::before {
    left: 10px;
  }
}

/* 右矢印ボタンのスタイル */
.slider-nav button:nth-child(2) {
  right: 0;
}
@media print, (min-width: 768px) {
  .slider-nav button:nth-child(2)::before {
    right: 15px;
  }
}
@media screen and (max-width: 767px) {
  .slider-nav button:nth-child(2)::before {
    right: 10px;
  }
}

/* ======================== */
/* インジケーターのスタイル */
/* ======================== */
.slider-indicators {
  display: flex;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
}
@media print, (min-width: 768px) {
  .slider-indicators {
    margin-top: calc(56.21622% - 30px);
  }
}
@media screen and (max-width: 767px) {
  .slider-indicators {
    margin-top: calc(56.21622% - 25px);
  }
}

/* インジケーターのボタンスタイル */
.slider-indicators button {
  display: block;
  position: relative;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
          appearance: none;
}

/* インジケーターアイコンのスタイル */
.slider-indicators button::before {
  content: '';
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: #fff;
  transition: background-color 300ms cubic-bezier(.215, .61, .355, 1), transform 300ms cubic-bezier(.215, .61, .355, 1);
}

/* インジケーターのホバー・アクティブ状態 */
@media print, (min-width: 768px) {
  .slider-indicators button:hover::before,
  .slider-indicators button:active::before {
    background: #c11a51;
  }
}

/* 現在のスライドを示すインジケーターのスタイル */
.slider-indicators button.is-current {
  pointer-events: none;
}

/* アクティブ状態のインジケーター */
.slider-indicators button.is-current::before {
  background: #c11a51;
  transform: scale(1.5);
}

/* ======================== */
/* グラブカーソルの設定 */
/* ======================== */
/* フリック操作中のカーソル変更 */
.slider.is-grabbing,
.slider.is-grabbing * {
  cursor: grabbing !important;
}

(($) => {

  const slider = (() => {
    /**
     * スライダーのプロパティを格納するオブジェクト
     */
    const props = {
      autoSlideInterval: 4000, // 自動スライドの間隔（ミリ秒単位）
      autoSlideTimer: 0, // 自動スライド用のタイマーID（clearTimeout用）
      current: 0, // 現在表示されているスライドのインデックス
      isAnimating: false, // スライドアニメーションが実行中かどうかのフラグ
      isFlickSlide: false, // フリック動作によるスライドが有効かどうかのフラグ
      isFlickTouch: false, // フリック動作が進行中かどうかを判定するフラグ
      isStart: false, // スライダーがビューポート内で動作を開始したかどうか
      length: 0, // スライドの総数（クローンを含まないオリジナルの数）
      slideDuration: 500, // スライドアニメーションの継続時間（ミリ秒単位）
      slideEasing: 'cubic-bezier(0.215, 0.61, 0.355, 1)' // スライドアニメーションのイージング（CSSの値形式）
    };

    /**
     * スライダーの初期化処理を行う関数
     */
    function init() {
      // スライド数を取得
      props.length = $('.slider-slide').length;

      // 各スライドのHTMLを取得して配列に保存
      let htmlArray = [];
      for (let i = 0; i < props.length; i++) {
        htmlArray.push($('.slider-slide:nth-child(' + (i + 1) + ')').prop('outerHTML'));
      }

      // ループ用に先頭と末尾のクローンスライドを生成・挿入
      const firstHtml = htmlArray[props.length - 1];
      const lastHtml = htmlArray[0];
      $('.slider-items').html(firstHtml + htmlArray.join('') + lastHtml);

      // インジケーター（スライド移動ボタン）のHTMLを生成
      let indicatorsHtml = '';
      for (let i = 0; i < props.length; i++) {
        indicatorsHtml += '<button type="button" aria-label="スライド' + (i + 1) + 'に移動"></button>';
      }
      $('.slider-indicators').html(indicatorsHtml);
      $('.slider-indicators > button:first-child').addClass('is-current');

      // トラック全体の幅（クローンを含めた幅）を設定し、初期位置を調整
      $('.slider-track-wrapper').width((props.length + 2) * 100 + '%');
      $('.slider-track-offset').css({ transform: 'translateX(' + -1 / (props.length + 2) * 100 + '%)'});

      // スライダーを初期表示する
      $('.slider').css({ visibility: 'visible' });

      // イベントの登録処理を呼び出し
      setupEvents();

      // ビューポート内に入ったときにスライダーを開始
      setupIntersectionObserver();
    }

    /**
     * 各種イベントを登録する関数
     */
    function setupEvents() {
      // 矢印ボタンのクリックイベントを登録
      $('.slider-nav > button').on('click', (e) => {
        if (!props.isAnimating) {
          const idx = $('.slider-nav > button').index($(e.currentTarget));
          const direction = idx === 0 ? -1 : 1; // 左：-1, 右：1
          moveSlide(direction, 0); // 指定方向にスライドを移動
        }
        return false; // クリックイベントの伝播を停止
      });
    
      // インジケーターのクリックイベントを登録
      $('.slider-indicators > button').on('click', (e) => {
        if (!props.isAnimating) {
          const idx = $('.slider-indicators > button').index($(e.currentTarget));
          moveSlide(idx - props.current, 0); // インジケーターのインデックスに対応するスライドに移動
        }
        return false; // クリックイベントの伝播を停止
      });
    
      // フリック操作の開始イベントを登録
      $('.slider').on('mousedown touchstart', (e) => {
        if (!props.isAnimating) {
          handleFlick(e); // フリック操作の処理を開始
        }
      });
    }

    /**
     * ビューポートにスライダーが入ったときに自動スライドを開始するための監視を設定
     */
    function setupIntersectionObserver() {
      // Intersection Observerのインスタンスを作成
      const observer = new IntersectionObserver((entries) => {
        entries.forEach((entry) => {
          // 要素がビューポート内に入ったら、自動スライドを開始
          if (entry.isIntersecting && !props.isStart) {
            props.isStart = true; // スライダーがビューポート内に入ったことを記録
            startTimer(); // 自動スライドを開始
          }
        });
      }, {
        root: null, // ビューポートを基準に監視
        rootMargin: '0px', // マージンなし
        threshold: 0 // 要素が1ピクセルでも見えたらトリガー
      });

      // スライダーの監視を開始
      observer.observe($('.slider')[0]);
    }

    /**
     * スライダーを指定方向に移動させる
     * @param {number} direction - スライドの移動方向と距離を表す値。正の値は右→左、負の値は左→右への移動、0 はその場に留まる
     * @param {number} dragOffsetX - ドラッグ操作時のオフセット値（ピクセル単位）
     */
    function moveSlide(direction, dragOffsetX) {
      // アニメーション中はスライドの操作を無効化
      props.isAnimating = true;

      // 次に表示するスライドのインデックスを計算
      let next = props.current + direction;
      if (next >= props.length) next -= props.length; // 最後のスライドから最初に戻る
      if (next < 0) next += props.length; // 最初のスライドから最後に戻る
  
      // 現在のインジケーターを更新
      $('.slider-indicators > button.is-current').removeClass('is-current');
      $('.slider-indicators > button:nth-child(' + (next + 1) + ')').addClass('is-current');
  
      // スライドの幅を取得してアニメーションを設定
      const areaW = $('.slider').outerWidth();
      $('.slider-items')[0].animate([
        { transform: 'translateX(' + dragOffsetX + 'px)' }, // ドラッグ位置から開始
        { transform: 'translateX(' + (-areaW * direction) + 'px)' } // 指定方向に移動
      ], {
        duration: props.slideDuration, // アニメーションの時間
        easing: props.slideEasing, // イージング関数
      }).onfinish = () => {
        // トラック位置の調整と状態のリセット
        $('.slider-track').css({
          transform: 'translateX(' + (-next / (props.length + 2) * 100) + '%)'
        });
        $('.slider-items').css({
          transform: 'translateX(0px)'
        });
        
        // 状態を更新
        props.current = next;
        props.isAnimating = false;

        // 自動スライドタイマーを再開
        startTimer();
      };
    }

    /**
     * フリック操作の処理を行う関数
     * @param {Event} e - 発生したイベントオブジェクト
     */
    function handleFlick(e) {
      clearTimeout(props.autoSlideTimer); // 自動スライドのタイマーを停止
      props.isFlickSlide = false; // フリック操作によるスライドの状態をリセット
      props.isFlickTouch = true; // フリック操作中であることをフラグに設定

      // イベントタイプに応じた名前を設定
      const moveEvent = (e.type === 'touchstart') ? 'touchmove.flick' : 'mousemove.flick';
      const endEvent = (e.type === 'touchstart') ? 'touchend.flick' : 'mouseup.flick mouseleave.flick';
      const origStart = (e.type === 'touchstart') ? e.originalEvent.changedTouches[0] : e.originalEvent;

      // フリックの初期位置を記録
      const touchPosition = {
        preX: origStart.pageX,
        preY: origStart.pageY
      };

      $('.slider').addClass('is-grabbing'); // グラブカーソルを表示

      // フリック中の動作を処理
      $('.slider').on(moveEvent, (e) => {
        if (props.isFlickTouch) {
          const origMove = (e.type === 'touchmove') ? e.originalEvent.changedTouches[0] : e.originalEvent;
          touchPosition.curX = origMove.pageX;
          touchPosition.curY = origMove.pageY;
          touchPosition.diffX = touchPosition.curX - touchPosition.preX;
          touchPosition.diffY = touchPosition.curY - touchPosition.preY;
    
          // フリック操作が水平方向かどうかを判定
          if (Math.abs(touchPosition.diffY) < Math.max(Math.abs(touchPosition.diffX), 10) || e.type === 'mousemove') {
            props.isFlickSlide = true; // フリック操作をスライドとして認識
            e.preventDefault(); // デフォルト動作をキャンセル

            // スライドをドラッグする動きを再現
            $('.slider-items').css({
              transform: 'translateX(' + touchPosition.diffX + 'px)'
            });
          } else {
            // 垂直方向の動きや不正な操作は無効化
            props.isFlickSlide = false;
            props.isFlickTouch = false;
            $('.slider').off('.flick').removeClass('is-grabbing'); // イベントを解除
            startTimer(); // 自動スライドを再開
          }
        }
      });
      
      // フリック終了時の処理を登録
      $('.slider').on(endEvent, (e) => {
        if (props.isFlickTouch) {
          props.isFlickTouch = false; // フリック操作終了をフラグに設定
          $('.slider').off('.flick').removeClass('is-grabbing'); // イベントを解除

          if (props.isFlickSlide) {
            const areaW = $('.slider').outerWidth(); // スライダーの幅を取得

            // フリック距離に応じてスライドを移動
            if (touchPosition.diffX > areaW / 10) {
              moveSlide(-1, touchPosition.diffX); // 左→右にスライド
              e.preventDefault();
            } else if (touchPosition.diffX < -areaW / 10) {
              moveSlide(1, touchPosition.diffX); // 右→左にスライド
              e.preventDefault();
            } else {
              moveSlide(0, touchPosition.diffX); // 元の位置に戻る
              e.preventDefault();
            }
          } else {
            // フリックとして認識されない場合はタイマーを再開
            startTimer();
          }
        }
      });
    }

    /**
     * 自動スライドのタイマーを開始する関数
     */
    function startTimer() {
      // 既存のタイマーがあればクリア
      clearTimeout(props.autoSlideTimer);
  
      // タイマーを設定して一定時間後にスライドを移動
      props.autoSlideTimer = setTimeout(() => {
        if (!props.isAnimating) {
          moveSlide(1, 0);  // 次のスライドに移動
        }
      }, props.autoSlideInterval); // 指定された間隔で実行
    }
    
    return {
      init: init
    };
  })();
  
  // スライダーの初期化を実行
  if ($('.slider')[0]) slider.init();

})(jQuery);

// ループ用に先頭と末尾のクローンスライドを生成・挿入
const firstHtml = htmlArray[props.length - 1];
const lastHtml = htmlArray[0];
$('.slider-items').html(firstHtml + htmlArray.join('') + lastHtml);

// インジケーター（スライド移動ボタン）のHTMLを生成
let indicatorsHtml = '';
for (let i = 0; i < props.length; i++) {
  indicatorsHtml += '<button type="button" aria-label="スライド' + (i + 1) + 'に移動"></button>';
}
$('.slider-indicators').html(indicatorsHtml);
$('.slider-indicators > button:first-child').addClass('is-current');

// トラック全体の幅（クローンを含めた幅）を設定し、初期位置を調整
$('.slider-track-wrapper').width((props.length + 2) * 100 + '%');
$('.slider-track-offset').css({ transform: 'translateX(' + -1 / (props.length + 2) * 100 + '%)'});

// スライダーを初期表示する
$('.slider').css({ visibility: 'visible' });

// 矢印ボタンのクリックイベントを登録
$('.slider-nav > button').on('click', (e) => {
  if (!props.isAnimating) {
    const idx = $('.slider-nav > button').index($(e.currentTarget));
    const direction = idx === 0 ? -1 : 1; // 左：-1, 右：1
    moveSlide(direction, 0); // 指定方向にスライドを移動
  }
  return false; // クリックイベントの伝播を停止
});

// インジケーターのクリックイベントを登録
$('.slider-indicators > button').on('click', (e) => {
  if (!props.isAnimating) {
    const idx = $('.slider-indicators > button').index($(e.currentTarget));
    moveSlide(idx - props.current, 0); // インジケーターのインデックスに対応するスライドに移動
  }
  return false; // クリックイベントの伝播を停止
});

// フリック操作の開始イベントを登録
$('.slider').on('mousedown touchstart', (e) => {
  if (!props.isAnimating) {
    handleFlick(e); // フリック操作の処理を開始
  }
});

function setupIntersectionObserver() {
  // Intersection Observerのインスタンスを作成
  const observer = new IntersectionObserver((entries) => {
    entries.forEach((entry) => {
      // 要素がビューポート内に入ったら、自動スライドを開始
      if (entry.isIntersecting && !props.isStart) {
        props.isStart = true; // スライダーがビューポート内に入ったことを記録
        startTimer(); // 自動スライドを開始
      }
    });
  }, {
    root: null, // ビューポートを基準に監視
    rootMargin: '0px', // マージンなし
    threshold: 0 // 要素が1ピクセルでも見えたらトリガー
  });

  // スライダーの監視を開始
  observer.observe($('.slider')[0]);
}

// 次に表示するスライドのインデックスを計算
let next = props.current + direction;
if (next >= props.length) next -= props.length; // 最後のスライドから最初に戻る
if (next < 0) next += props.length; // 最初のスライドから最後に戻る

// スライドの幅を取得してアニメーションを設定
const areaW = $('.slider').outerWidth();
$('.slider-items')[0].animate([
  { transform: 'translateX(' + dragOffsetX + 'px)' }, // ドラッグ位置から開始
  { transform: 'translateX(' + (-areaW * direction) + 'px)' } // 指定方向に移動
], {
  duration: props.slideDuration, // アニメーションの時間
  easing: props.slideEasing, // イージング関数
}).onfinish = () => {
  // アニメーション完了後の処理
};

.onfinish = () => {
  // トラック位置の調整と状態のリセット
  $('.slider-track').css({
    transform: 'translateX(' + (-next / (props.length + 2) * 100) + '%)'
  });
  $('.slider-items').css({
    transform: 'translateX(0px)'
  });
  
  // 状態を更新
  props.current = next;
  props.isAnimating = false;

  // 自動スライドタイマーを再開
  startTimer();
};

clearTimeout(props.autoSlideTimer); // 自動スライドのタイマーを停止
props.isFlickSlide = false; // フリック操作によるスライドの状態をリセット
props.isFlickTouch = true; // フリック操作中であることをフラグに設定

// イベントタイプに応じた名前を設定
const moveEvent = (e.type === 'touchstart') ? 'touchmove.flick' : 'mousemove.flick';
const endEvent = (e.type === 'touchstart') ? 'touchend.flick' : 'mouseup.flick mouseleave.flick';
const origStart = (e.type === 'touchstart') ? e.originalEvent.changedTouches[0] : e.originalEvent;

// フリックの初期位置を記録
const touchPosition = {
  preX: origStart.pageX,
  preY: origStart.pageY
};

$('.slider').addClass('is-grabbing'); // グラブカーソルを表示

// フリック中の動作を処理
$('.slider').on(moveEvent, (e) => {
  if (props.isFlickTouch) {
    const origMove = (e.type === 'touchmove') ? e.originalEvent.changedTouches[0] : e.originalEvent;
    touchPosition.curX = origMove.pageX;
    touchPosition.curY = origMove.pageY;
    touchPosition.diffX = touchPosition.curX - touchPosition.preX;
    touchPosition.diffY = touchPosition.curY - touchPosition.preY;

    // フリック操作が水平方向かどうかを判定
    if (Math.abs(touchPosition.diffY) < Math.max(Math.abs(touchPosition.diffX), 10) || e.type === 'mousemove') {
      props.isFlickSlide = true; // フリック操作をスライドとして認識
      e.preventDefault(); // デフォルト動作をキャンセル

      // スライドをドラッグする動きを再現
      $('.slider-items').css({
        transform: 'translateX(' + touchPosition.diffX + 'px)'
      });
    } else {
      // 垂直方向の動きや不正な操作は無効化
      props.isFlickSlide = false;
      props.isFlickTouch = false;
      $('.slider').off('.flick').removeClass('is-grabbing'); // イベントを解除
      startTimer(); // 自動スライドを再開
    }
  }
});

// フリック終了時の処理を登録
$('.slider').on(endEvent, (e) => {
  if (props.isFlickTouch) {
    props.isFlickTouch = false; // フリック操作終了をフラグに設定
    $('.slider').off('.flick').removeClass('is-grabbing'); // イベントを解除

    if (props.isFlickSlide) {
      const areaW = $('.slider').outerWidth(); // スライダーの幅を取得

      // フリック距離に応じてスライドを移動
      if (touchPosition.diffX > areaW / 10) {
        moveSlide(-1, touchPosition.diffX); // 左→右にスライド
        e.preventDefault();
      } else if (touchPosition.diffX < -areaW / 10) {
        moveSlide(1, touchPosition.diffX); // 右→左にスライド
        e.preventDefault();
      } else {
        moveSlide(0, touchPosition.diffX); // 元の位置に戻る
        e.preventDefault();
      }
    } else {
      // フリックとして認識されない場合はタイマーを再開
      startTimer();
    }
  }
});

function startTimer() {
  // 既存のタイマーがあればクリア
  clearTimeout(props.autoSlideTimer);

  // タイマーを設定して一定時間後にスライドを移動
  props.autoSlideTimer = setTimeout(() => {
    if (!props.isAnimating) {
      moveSlide(1, 0);  // 次のスライドに移動
    }
  }, props.autoSlideInterval); // 指定された間隔で実行
}