swiper 複数 ループ 無理やり

html

<?php //swiper

$imgs_number  = 'imgs';
$gallery_title  = '女性ドライバー専用車両';
  include(get_stylesheet_directory() . "/2_head/swiper/swiper_gallery.php");  ?>

swiper html ループ 固定ページのAFCギャラリー

<?php 
//前ページで設定
//$imgs_number  = 'imgs2';
//$gallery_title  = '女性専用設備';

//include(get_stylesheet_directory() . "/2_head/swiper/swiper_gallery.php"); ?>






<div class="swiper_wrap_wrap gallery_swiper_wrap inview fadeInBottom " >
    <div class="swiper gallery_swiper gallery_swiper_<?php echo $imgs_number ?> ">
  <!-- 必要に応じたwrapper -->
  <div class="swiper-wrapper">
    <!-- スライド -->

    <?php
$imgs = get_field($imgs_number);



$i = 0; //最初用
foreach ($imgs as $img):
    $attachment_id = $img['id'];
                $img_url = wp_get_attachment_image_src($attachment_id, 'd_slider_img_size');
    $i++; //画像が合計2個以内のときはフォーチを2回させたい

    ?>


    <div class="swiper-slide">

<div class="img_box">
<img src="<?php print $img_url[0];?>" width=""  class=" " alt="<?php echo $gallery_title ?>|<?php echo $alt1; ?> ">
        
    </div><!-- /.img_box -->
    </div>

    <?php //endループフィールド

endforeach;
?>

    </div>

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

</div>


<div class="swiper-button-prev <?php echo $imgs_number ?>_pre"></div>
  <div class="swiper-button-next <?php echo $imgs_number ?>_next"></div>

</div>


フッターすぅリプと 3_css_js_foot.php     child

<?php ////////////////////////個ページ ギャラリー 同じページ内でswiperのナビが連動してしまうので、無理やり・・・・・  ?>
<script>
//ギャラリーimgs
const gallery_swiper_imgs = new Swiper(".gallery_swiper_imgs", {
//こっちがモバイル 兼 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: '2', //autoにするとcssで指定したサイズで表示
      //slidesPerView: 3,
        //spaceBetween: 0, // スライド間の余白(px)

    }
  },

// ページネーション
// pagination: {
//     el: ".swiper-pagination",
//     clickable: true,
//   },
  // 前後の矢印
  navigation: {
    nextEl: ".imgs_next",//このクラスがあればそこがナビになる
    prevEl: ".imgs_pre",//このクラスがあればそこがナビになる

  },
});

</script>

<script>
//ギャラリーimgs2
const gallery_swiper_imgs2 = new Swiper(".gallery_swiper_imgs2", {
//こっちがモバイル 兼 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: '2', //autoにするとcssで指定したサイズで表示
      //slidesPerView: 3,
        //spaceBetween: 0, // スライド間の余白(px)

    }
  },

// ページネーション
// pagination: {
//     el: ".swiper-pagination",
//     clickable: true,
//   },
  // 前後の矢印
  navigation: {
    nextEl: ".imgs2_next",//このクラスがあればそこがナビになる
    prevEl: ".imgs2_pre",//このクラスがあればそこがナビになる

  },
});

</script>

<script>
//ギャラリーimgs3
const gallery_swiper_imgs3 = new Swiper(".gallery_swiper_imgs3", {
//こっちがモバイル 兼 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: '2', //autoにするとcssで指定したサイズで表示
      //slidesPerView: 3,
        //spaceBetween: 0, // スライド間の余白(px)

    }
  },

// ページネーション
// pagination: {
//     el: ".swiper-pagination",
//     clickable: true,
//   },
  // 前後の矢印
  navigation: {
    nextEl: ".imgs3_next",//このクラスがあればそこがナビになる
    prevEl: ".imgs3_pre",//このクラスがあればそこがナビになる

  },
});

</script>


<script>
//ギャラリーimgs4
const gallery_swiper_imgs4 = new Swiper(".gallery_swiper_imgs4", {
//こっちがモバイル 兼 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: '3', //autoにするとcssで指定したサイズで表示
      //slidesPerView: 3,
        //spaceBetween: 0, // スライド間の余白(px)

    }
  },

// ページネーション
// pagination: {
//     el: ".swiper-pagination",
//     clickable: true,
//   },
  // 前後の矢印
  navigation: {
    nextEl: ".imgs4_next",//このクラスがあればそこがナビになる
    prevEl: ".imgs4_pre",//このクラスがあればそこがナビになる

  },
});

</script>

<?php ////////////////////////end/ 個ページ ギャラリー 同じページ内でswiperのナビが連動してしまうので、無理やり・・・・・  ?>