swiper 複数使うときの　まとめ　扱いやすく　マスター　苦手意識　消す

まず、必要なのは、

フッターに　これがjs

<?php //スワイパー 
///実際のコンテンツより下でないと下でないと機能しないのでフッター
?>

<script src="<?php echo get_stylesheet_directory_uri(); ?>/2_head/swiper/swiper-bundle.min.js"></script>

 

そして、この下にそれぞれのスワイパーの設定を書いていく。　ポイントは

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

両方とも変える　独自なものに

<script>
const swiper_youtube = new Swiper(".swiper_youtube", {
//こっちがモバイル　兼　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: ".swiper-button-next",//このクラスがあればそこがナビになる
    prevEl: ".swiper-button-prev",//このクラスがあればそこがナビになる
    
  },
});
</script>

 

そんで、今回間違えたが、

スワイパーを実際設置するところで swiper swiper_youtube とswiperも生きで、独自のスワイパークラスを追加すること

また、書くcssを変更したいためにスワイパーの大枠をyoutube_swipwe_wrapで囲う

<div class="youtube_swipwe_wrap">

<div class="swiper_wrap_wrap">
    <div class="swiper swiper_youtube">
  <!-- 必要に応じたwrapper -->
  <div class="swiper-wrapper">
    <!-- スライド -->

    <div class="swiper-slide"><div class="youtube_box">
        <iframe width="560" height="315" src="https://www.youtube.com/embed/-pkaJrrotRY?si=z9rdrhs1NAK-lpt8" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe></div></div>

    <div class="swiper-slide">
    <div class="youtube_box">
<iframe width="560" height="315" src="https://www.youtube.com/embed/AMu3zeWWAP4" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>
</div>

<div class="swiper-slide">
    <div class="youtube_box">
<iframe width="560" height="315" src="https://www.youtube.com/embed/rsTOy_RLPvo" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
</div>

    </div>

    </div>
  <!-- 必要に応じてページネーション -->
  <div class="swiper-pagination"></div>
  <!-- 必要に応じてナビボタン -->


</div>


<div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>

</div>
    
</div><!-- /.youtube_swipwe_wrap -->

 

CSSはベースのスワイパーが効いてる

ヘッダー

<link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/2_head/swiper/swiper-bundle.min.css"/>

それを、各wrapで囲んだlessで変更する。

.youtube_swipwe_wrap{

///pre nextを外に出すため囲む
.swiper_wrap_wrap{position: relative;
  max-width: 92%;
  margin-left: auto;
  margin-right: auto;
}
//cssで位置移動
.swiper-button-next, .swiper-rtl .swiper-button-prev {
  right: -40px;
  @media screen and (max-width: 736px){
      right: -30px;
  }//@media screen 736px
}
//cssで位置移動
.swiper-button-prev, .swiper-rtl .swiper-button-next{
  left: -40px;

  @media screen and (max-width: 736px){
      left: -30px;
  }//@media screen 736px
}

//矢印の色替え
.swiper-button-next,
.swiper-button-prev {
  --swiper-navigation-color: #858585; //ここに変更する色を指定
}

//youtubeiframe

.swiper_wrap_wrap{

  .youtube_box{width: 100%; aspect-ratio: 16 / 9;

      display: grid;


      @media screen and (max-width: 736px){
          width:100%; 
      }//@media screen 736px

      iframe {
          width: 100%;
          height: 100%;
      }
  
  }


}


.swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
 // height: 300px;

  
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 47%;
  height: 100%;
  text-align: center;
  //line-height: 300px;
  margin-right: 1.5%;
  margin-left: 1.5%;

  @media screen and (max-width: 736px){
//1個ｆだとページ送りで隙間ができるから
      margin-right: 0%;
      margin-left: 0%;

  }//@media screen 736px
  
}

}

こんな感じ　以上　これで、それぞれのスワイパーをコントロールできる