夢みるゴリラ
夢みるゴリラ

Swiperのドットの
解決法

PC表示ではマウスでスワイプできるようにして、ドットは機能させない

スマホ表示では両方機能させる

PC表示ではマウスでスワイプできないようにして、ドットは機能させる

スマホ表示では両方機能させる

headに書くこと

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/swiper@4.5.1/dist/css/swiper.min.css"/>
<script src="//cdn.jsdelivr.net/npm/swiper@4.5.1/dist/js/swiper.min.js"></script>

JavaScriptで書くこと

/*--１つ目のswiper--*/
let Swiper01 = new Swiper(".js-swiper01", {
  loop: true, // ループの指定
  centeredSlides : true,
  loopAdditionalSlides: 5, //スライダーを複製してループを滑らかにする
  slidesPerView: 4.2,
  spaceBetween: 10,
  autoplay: {
      delay: 1000, //１秒後に次のスライドへ
      disableOnInteraction: false //ユーザー側で操作してもスライドを止めない
  },
  speed: 1000, //１秒かけてフェードで切り替わる
  pagination: { // 丸のページネーションを使うなら書く
      el: ".swiper-pagination",
  },
  navigation: { // 左右のページ送を使うなら書く
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
  },
  breakpoints: {
      560: { //560px以下なら
        slidesPerView: 1.5,
        spaceBetween: 5,
         pagination: { // 丸のページネーションを使うなら書く
             clickable: true
         }
      }
    }
});

/*--２つ目のswiper--*/
let Swiper02 = new Swiper(".js-swiper02", {
  loop: true, // ループの指定
  centeredSlides : true,
  loopAdditionalSlides: 5, //スライダーを複製してループを滑らかにする
  slidesPerView: 4.2,
  spaceBetween: 10,
    autoplay: {
      delay: 1000, //１秒後に次のスライドへ
      disableOnInteraction: false //ユーザー側で操作してもスライドを止めない
  },
  speed: 1000, //１秒かけてフェードで切り替わる
  allowTouchMove: false,//マウスでのスワイプを禁止
  pagination: { // 丸のページネーションを使うなら書く
      el: ".swiper-pagination",
      clickable: true //クリックを有効化する
  },
  navigation: { // 左右のページ送を使うなら書く
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev"
  },
  breakpoints: {
      560: { //560px以下なら
        slidesPerView: 1.5,
        spaceBetween: 5, 
        allowTouchMove: true 
      }
   }
});

HTMLで書くこと

<div class="d-demo">
/*--１つ目のswiper--*/
<div class="swiper-container d-swiper js-swiper01">
  <div class="swiper-wrapper">
     <div class="swiper-slide">
        <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-orange-05-min.jpg" alt>
     </div>
     <div class="swiper-slide">
        <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-orange-04-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-orange-03-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-orange02-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-orange-01-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-yellow-05-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-yellow-04-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-yellow-03-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-yellow-02-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-yellow-01-min.jpg" alt>
     </div>
  </div>
  <!-- 丸いページネーション -->
  <div class="swiper-pagination swiper-pagination-white"></div>

  <!-- 左右のページ送り -->
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
</div>

/*--２つ目のswiper--*/
<div class="swiper-container d-swiper js-swiper02 d-swiper--mt-30">
  <div class="swiper-wrapper">
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-yellow-05-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-yellow-04-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-yellow-03-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-yellow-02-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-yellow-01-min.jpg" alt>
     </div>
   <div class="swiper-slide">
        <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-orange-05-min.jpg" alt>
     </div>
     <div class="swiper-slide">
        <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-orange-04-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-orange-03-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-orange02-min.jpg" alt>
     </div>
     <div class="swiper-slide">
       <img src="https://yumegori.com/wp-content/uploads/2021/06/img-gorolla-orange-01-min.jpg" alt>
     </div>
  </div>
  <!-- 丸いページネーション -->
  <div class="swiper-pagination swiper-pagination-white"></div>

  <!-- 左右のページ送り -->
  <div class="swiper-button-prev swiper-button-white"></div>
  <div class="swiper-button-next swiper-button-white"></div>
</div>
</div>