月: 2024年8月

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++; //画像が合計２個以内のときはフォーチを２回させたい

    ?>


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

 

mobile.cssがキャッシュされてしまう、。PCでも出てる。

答え、

クロームの機能拡張

ビューポートリサイザーをオン・オフするとなおる。

これで確認する際、

一応ユーザーエージェンとを偽装してるのかも

 

そんで、色々ブラウザをひらいたししてると、それが消えていないバグ？

そんで、キャッシュされてるサイトで、オンオフすると消える

svgに光彩　文字に光彩

文字に光彩

全方位
    text-shadow: 
    2px 2px 12px rgba(255, 255, 255, 0.4), 
    -2px 2px 12px rgba(255, 255, 255, 0.4), 
    2px -2px 12px rgba(255, 255, 255, 0.4), 
    -2px -2px 12px rgba(255, 255, 255, 0.4);
svgに光彩

全方位

            filter      :
                drop-shadow(1px 1px 3px rgba(255, 255, 255, 0.4)) 
                drop-shadow(-1px 1px 3px rgba(255, 255, 255, 0.4)) 
                drop-shadow(1px -1px 3px rgba(255, 255, 255, 0.4)) 
                drop-shadow(-1px -1px 3px rgba(255, 255, 255, 0.4));