mk-webwork codenote
Swiper Slide
矢印アイコン

Swiper Slide

  • JavaScript
  • 動くデザイン

https://swiperjs.com

<!-- Slider main container -->
<div class="swiper">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>
.swiper {
  width: 600px;
  height: 300px;
}
const swiper = new Swiper('.swiper', {
  // Optional parameters
  direction: 'vertical',
  loop: true,

  // If we need pagination
  pagination: {
    el: '.swiper-pagination',
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

  // And if we need scrollbar
  scrollbar: {
    el: '.swiper-scrollbar',
  },
});

▼PC/SPで表示枚数を変える

// =========================
//  swiper 
// =========================
const swiper = new Swiper('.swiper', {
  // Optional parameters
  loop: false,
  slidesPerView: 1, //1スライド表示
  breakpoints: {
    768: {  //PC responsive
      loop: false,
      slidesPerView: 2,　//2スライド表示
      slidesPerGroup: 1,
      initialSlide: 0, //1にすると2枚目から始まる
    }
  },
  // If we need pagination
  pagination: {
      el: ".swiper-pagination",
      type: "fraction", //ページ数カウンター
  },

  // Navigation arrows
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },

});

サムネイル連動.ver 

      <!--  swipe slider ここから  -->
        <!-- 本体スライド -->
        <div class="swiper swiperMain">
          <div class="swiper-wrapper">
              <div class="swiper-slide"></div>
              <div class="swiper-slide"></div>
              <div class="swiper-slide"></div>
              <div class="swiper-slide"></div>
              <div class="swiper-slide"></div>
          </div>
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>

        <div class="swiper swiperThumbnail">
          <!-- サムネイル用スライド -->
          <div class="swiper-wrapper">
              <div class="swiper-slide"></div>
              <div class="swiper-slide"></div>
              <div class="swiper-slide"></div>
              <div class="swiper-slide"></div>
              <div class="swiper-slide"></div>
          </div>
        </div>
      <!--  swipe slider ここまで  -->
// ===============
// ===  swipe slider  ===
// ===============
    //slider1
    //サムネイルの設定
    var swiperThumbnail = new Swiper(".swiperThumbnail", {
      slidesPerView: 5,
      spaceBetween: 8,
      freeMode: true,
      watchSlidesProgress: true,
    });

    //本体スライドの設定
    var swiperMain01 = new Swiper(".swiperMain", {
      loop: true,
      navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      thumbs: {
          swiper: swiperThumbnail,//サムネイルの同期指定
        },
    });

サムネイル付きスライドを複数設置する場合

<div class="slider-wrap">
  <div class="swiper slider-main">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      ...
    </div>
  </div>
  <div class="swiper slider-thumb">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      ...
    </div>
  </div>
</div>

<div class="slider-wrap">
  <div class="swiper slider-main">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      ...
    </div>
  </div>
  <div class="swiper slider-thumb">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      ...
    </div>
  </div>
</div>

<div class="slider-wrap">
  <div class="swiper slider-main">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      ...
    </div>
  </div>
  <div class="swiper slider-thumb">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
      <!-- Slides -->
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
      ...
    </div>
  </div>
</div>
var sliderWrap = document.querySelectorAll('.slider-wrap');
//サムネイルのスライダーを指定
var sliderThumb = document.querySelectorAll('.slider-thumb');
//メインのスライダーを指定
var sliderMain = document.querySelectorAll('.slider-main');
//slider-wrapの数だけ繰り返す
for (let i = 0; i < sliderWrap.length; i++) {
  //.slider-wrap、.slider-thumb、.slider-mainに01から始まる連番を振る
  var num = ('00' + (i+1)).slice(-2);
  sliderWrap[i].className += (num);
  sliderThumb[i].className += (num);
  sliderMain[i].className += (num);
  //サムネイル用のスライダー呼び出し&オプション指定
  var swiperThumb = new Swiper('.slider-thumb' + (num), {
    slidesPerView: 3,
    spaceBetween: 15,
  });
  //メインのスライダー呼び出し&オプション指定
  var swiperMain = new Swiper ('.slider-main' + (num), {
    centeredSlides: true,
    thumbs: {
      swiper: swiperThumb,
    },
    slidesPerView: 1,
  });
}

▼スワイプやクリックをしても自動再生を止めない

const swiper = new Swiper(".swiper", {
  loop: true, // ループさせる
  speed: 1500, // 少しゆっくり(デフォルトは300)
  autoplay: { // 自動再生
    delay: 1500, // 1.5秒後に次のスライド
    disableOnInteraction: false, // 矢印をクリックしても自動再生を止めない ←←←←←
  },
});
←　もどる