【Swiper.js】複数のスライダーを同じページに設置する方法

同一ページに複数のスライダーを入れたい、
スライダーごとに設定を変えたい時の備忘録

最低限の設定

swiper.js、swiper.cssの読み込み

<script src="js/swiper.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="css/swiper.min.css">

html

    <section>
       <div class="swiper-container">
           <div class="swiper-wrapper">
             <div class="swiper-slide"><img src="画像パス"alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
           </div>
           <div class="swiper-button-prev"></div>
           <div class="swiper-button-next"></div>
         </div>
   </section>

複数のスライダー設置方法

html

<main>
   <section>
       <h1>スライダー1</h1>
       <div class="swiper-container slider1">
           <div class="swiper-wrapper">
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
           </div>
           <div class="swiper-button-prev"></div>
           <div class="swiper-button-next"></div>
         </div>
   </section>
   <section>
       <h1>スライダー2</h1>
       <div class="swiper-container slider2">
           <div class="swiper-wrapper">
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
           </div>
           <div class="swiper-button-prev"></div>
           <div class="swiper-button-next"></div>
         </div>
   </section>
   <section>
       <h1>スライダー3</h1>
       <div class="swiper-container slider3">
           <div class="swiper-wrapper">
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
           </div>
           <div class="swiper-button-prev"></div>
           <div class="swiper-button-next"></div>
         </div>
   </section>
   <section>
       <h1>スライダー4</h1>
       <div class="swiper-container slider4">
           <div class="swiper-wrapper">
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
             <div class="swiper-slide"><img src="画像パス" alt=""></div>
           </div>
           <div class="swiper-button-prev"></div>
           <div class="swiper-button-next"></div>
         </div>
   </section>
</main>

Js

let slider1 = new Swiper ('.slider1', {
   //各種設定

});
let slider2 = new Swiper ('.slider2', {
   //各種設定

});
let slider3 = new Swiper ('.slider3', {
   //各種設定

});
let slider4 = new Swiper ('.slider4', {
   //各種設定

});

これで完了