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のナビが連動してしまうので、無理やり・・・・・ ?>