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++; //画像が合計２個以内のときはフォーチを２回させたい
?>
<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のナビが連動してしまうので、無理やり・・・・・ ?>
