Swiperの使い方を解説！動かないときの対処法やダウンロード方法も紹介

const swiper = new Swiper(".swiper", {
  slidesPerView: 1.5, //表示させるスライド枚数を指定
  centeredSlides: true, //1枚目のスライドを真ん中に配置させる
  spaceBetween: 10, //スライド間のスペースを設定
  loop: true,
  
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

<!-- slider全体を包む要素 -->
<div class="swiper">
<!-- 各スライド全体を包む要素 -->
<div class="swiper-wrapper">
<!-- 各スライドの要素 -->
<div class="swiper-slide slide1">slide1</div>
<div class="swiper-slide slide2">slide2</div>
<div class="swiper-slide slide3">slide3</div>
<div class="swiper-slide slide4">slide4</div>
</div>
<!-- ナビゲーションボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

.swiper {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.slide1 {
  background-color: #a3cce0;
}

.slide2 {
  background-color: #a4da1c;
}

.slide3 {
  background-color: #cb4651;
}

.slide4 {
  background-color: #DEC20B;
}

<!-- loopの内容 -->
<div id="loop" class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide1">slide1</div>
    <div class="swiper-slide slide2">slide2</div>
    <div class="swiper-slide slide3">slide3</div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

<!-- autoplayの内容 -->
<div id="autoplay" class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide slide1">slide1</div>
    <div class="swiper-slide slide2">slide2</div>
    <div class="swiper-slide slide3">slide3</div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

// loopの設定内容
const loop = new Swiper("#loop", {
  // ループ
  loop: true,
  
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

// autoplayの設定内容
const autoplay = new Swiper("#autoplay", {
  // 自動再生
  autoplay: {
      delay: 3000, 
   },
  
  loop: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  }
});

.swiper {
  width: 100%;
  height: 300px;
  margin: 10px auto;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.slide1 {
  background-color: #a3cce0;
}

.slide2 {
  background-color: #a4da1c;
}

.slide3 {
  background-color: #cb4651;
}

.slide4 {
  background-color: #DEC20B;
}

const swiper = new Swiper(".swiper", {
  // 599px以下の場合
  slidesPerView: 1, // 1枚表示
  spaceBetween: 10, 
  centeredSlides: true, 
  loop: true,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  
  // ブレイクポイントオブジェクトを設定
  breakpoints: {
      // 599px以上980px以下の場合
      599: {
        slidesPerView: 1.5, // 1.5枚表示
      },
      // 980px以上の場合
      980: {
        slidesPerView: 3, // 3枚表示
      },
   }
});

<!-- slider全体を包む要素 -->
<div class="swiper">
<!-- 各スライド全体を包む要素 -->
<div class="swiper-wrapper">
<!-- 各スライドの要素 -->
<div class="swiper-slide slide1">slide1</div>
<div class="swiper-slide slide2">slide2</div>
<div class="swiper-slide slide3">slide3</div>
<div class="swiper-slide slide4">slide4</div>
<div class="swiper-slide slide5">slide5</div>
<div class="swiper-slide slide6">slide6</div>
<div class="swiper-slide slide7">slide7</div>
</div>
<!-- ナビゲーションボタン -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>

.swiper {
  width: 100%;
  height: 300px;
}

.swiper-slide {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
}

.slide1 {
  background-color: #a3cce0;
}

.slide2 {
  background-color: #a4da1c;
}

.slide3 {
  background-color: #cb4651;
}

.slide4 {
  background-color: #DEC20B;
}

.slide5 {
  background-color: #8000ff;
}

.slide6 {
  background-color: #ca9797;
}

.slide7 {
  background-color: #f2c1d5;
}

    <!-- Swiper専用のJSファイルを先に記述 -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <!-- 自分で作成したJSファイルを後に記述 -->
    <script src="js/main.js"></script>
  </body>
</html>

<!-- slider全体を包む要素（必須）-->
<div class="swiper">
    <!-- 各スライド全体を包む要素（必須） -->
    <div class="swiper-wrapper">
        <!-- 各スライドの要素（必須） -->
        <div class="swiper-slide slide1">slide1</div>
        <div class="swiper-slide slide2">slide2</div>
        <div class="swiper-slide slide3">slide3</div>
    </div>
</div>

const swiper = new Swiper(".swiper", {  // ←ここのクラス名に間違いはないか？
  // オプションが入る
});  

const swiper = new Swiper(".swiper", {
  loop: true, // ← loopがオプション名
});

const swiper = new Swiper(".swiper", {
  autoplay: {
      delay: 3000, // ← 数値
   },
  loop: true, // ← true／false
  navigation: {
    nextEl: ".swiper-button-next", // ← ダブルクオーテーション
    prevEl: ".swiper-button-prev"
  }
});

const swiper = new Swiper(".swiper", {
  slidesPerView: 1.5, // ←カンマを入れる
  spaceBetween: 10, // ←カンマを入れる
  loop: true,
});

const swiper = new Swiper(".swiper", {
  //ここにオプションと値を記述していく
  loop: true,
});

const swiper = new Swiper('.swiper', {　
　// onパラメータを指定する
  on: {
    // ここでイベントが発生した際の処理を指定する
    init: function () {
      console.log('swiper initialized');
    },
  },
});

const swiper = new Swiper('.swiper', {
  // ...
});
// Swiper初期化後に「onメソッド」で登録
swiper.on('slideChange', function () {
  console.log('slide changed');
});