swiper 複数　top-slに利用時のメモ

 

https://webwork-plus.com/content/design/swiper-multiple.html

https://takechi-web.com/swiper-multiple/

 

私事の検証結果

結論

参考サイトのやり方で、スライドは別々の設定が可能だが、

ページネーションについては、

swiper-button-prev　を使い回せない（.sl01  .swiper-button-prev）みたいに指定しても一緒に動く

そのためswiper-button-prevを使いまわしたい（デザインがきいているから）場合

swiper-button-prev　page-prev1 とクラスをつけて、

設定でも　page-prev1　の方をナビに設定する

増やす場合

swiper-button-prev　page-prev2

設定でも　page-prev2　とナビに設定する

 

最初ミスってたのは

const youtube_swiper = new Swiper(“.youtube_swiper”, {

と２個名前を替えること。最初のconst swiper のままやってた

完成コード

<script>
const youtube_swiper = new Swiper(".youtube_swiper", {
//こっちがモバイル　兼　PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
  //slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
  //centeredSlides: true, // アクティブなスライドを中央に配置する
  //spaceBetween: 32, // スライド間の余白（px）
  // loop: true,
  speed:1000,//矢印クリック 自動再生で　動く速度　多いほうが遅く
  //initialSlide: -1,//　0スタートで表示順調整

  // autoplay: {
  //   delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
  //   disableOnInteraction: false,
  //   resistanceRatio:0.1,
  // },
  
  breakpoints: { // こっちがPC
      737: { // 画面幅px以上で適用　ブレークポイント
     slidesPerView: 'auto', //autoにするとcssで指定したサイズで表示
      //slidesPerView: 3,
        //spaceBetween: 0, // スライド間の余白（px）
      
    }
  },
  
// ページネーション
// pagination: {
//     el: ".swiper-pagination",
//     clickable: true,
//   },
  // 前後の矢印
  navigation: {
    nextEl: ".page-next1",//このクラスがあればそこがナビになる
    prevEl: ".page-prev1",//このクラスがあればそこがナビになる
    
  },
});
</script>

<script>
  
const slider_f_swiper = new Swiper(".slider_f_swiper", {
//こっちがモバイル　兼　PC
slidesPerView: 1,/* コンテナ内に表示させるスライド数 */
  //slidesPerView: 1.45, // コンテナ内に表示させるスライド数（CSSでサイズ指定する場合は 'auto'）
  //centeredSlides: true, // アクティブなスライドを中央に配置する
  //spaceBetween: 32, // スライド間の余白（px）
  // loop: true,
  speed:1000,//矢印クリック 自動再生で　動く速度　多いほうが遅く
  //initialSlide: -1,//　0スタートで表示順調整

  autoplay: {
    delay: 3000, // スライドの自動再生速度調整 2000 = 2秒
    disableOnInteraction: false,
    resistanceRatio:0.1,
  },
  
  breakpoints: { // こっちがPC
      737: { // 画面幅px以上で適用　ブレークポイント
     slidesPerView: 'auto', //autoにするとcssで指定したサイズで表示
      //slidesPerView: 3,
        //spaceBetween: 0, // スライド間の余白（px）
      
    }
  },
  
// ページネーション
// pagination: {
//     el: ".swiper-pagination",
//     clickable: true,
//   },
  // 前後の矢印
  navigation: {
    nextEl: ".page-next2",//このクラスがあればそこがナビになる
    prevEl: ".page-prev2",//このクラスがあればそこがナビになる
    
  },
});
</script>