const workSwiper = new Swiper('.work-box-swiper', {
  // 切り替えのモーション
  speed: 1000, // 表示切り替えのスピード
  effect: "fade", // 切り替えのmotion (※1)
  fadeEffect: {
    crossFade: true
  },
  allowTouchMove: true, // スワイプで表示の切り替えを有効に

  // 最後→最初に戻るループ再生を有効に
  loop: true,

  // 自動スライドについて
  autoplay: {
    delay: 3000, // 何秒ごとにスライドを動かすか
    stopOnLastSlide: false, // 最後のスライドで自動再生を終了させるか
    disableOnInteraction: true, // ユーザーの操作時に止める
    reverseDirection: false, // 自動再生を逆向きにする
  },

  // 表示について
  centeredSlides: true, // 中央寄せにする
  slidesPerView: "auto",
  spaceBetween: 30,

  // ページネーション
  pagination: {
    el: ".swiper-pagination", // paginationのclass
    clickable: true, // クリックでの切り替えを有効に
    type: "fraction" // paginationのタイプ
  },
  
  // 前へ次へ
  navigation: {
  nextEl: '.swiper-button-next',
  prevEl: '.swiper-button-prev',
  },
});

document.addEventListener("DOMContentLoaded", function() {
  const swiperPagination = document.querySelector('.swiper-pagination-fraction');
  if (swiperPagination) {
    const separator = swiperPagination.childNodes[1]; // インデックス1は / に対応
    if (separator && separator.nodeType === Node.TEXT_NODE) {
      const span = document.createElement('span');
      span.classList.add('swiper-pagination-separator');
      span.textContent = separator.textContent; // テキストノードの内容を保持
      swiperPagination.replaceChild(span, separator); // 元のテキストを新しいspanタグに置き換え
    }
  }
});