４枚の写真切り替えで一枚目が表示されない

Question

実現したいこと

４枚の写真を２秒ごとの切り替えで表示させたい。

発生している問題・分からないこと

4枚のslideimg_paraを２秒ごとに写真切り替えするようにしたいのですが、
どうしても１枚目が表示されないエラーが発生しています。
ご教示いただけないでしょうか。

エラーメッセージ

4枚のslideimg_paraを２秒ごとに写真切り替えするようにしたいのですが、
どうしても１枚目が表示されないエラーが発生しています。
ご教示いただけないでしょうか。

該当のソースコード

<div class="box2">	
<div class="container_kasane_flarerib delayScroll">
<div class="conte2">
<div class="conte2-child slider-container-full">
        <!-- 1枚目 -->
        <div class="slideimg_para">
          <p><a href="#"><img src="image/top.webp" alt="1枚目"></a></p>
        </div>
        <!-- 2枚目 -->
        <div class="slideimg_para">
          <p><a href="#"><img src="image/2.webp" alt="2枚目"></a></p>
        </div>
        <!-- 3枚目 -->
        <div class="slideimg_para">
          <p><a href="#"><img src="image/3.webp" alt="3枚目"></a></p>
        </div>
	        <!-- 4枚目 -->
        <div class="slideimg_para">
          <p><a href="#"><img src="image/4.webp" alt="4枚目"></a></p>
        </div>
      </div>		
	 </div>
<div class="conte3">
<p class="title_flare delayScroll"><img src="image/5_a.webp" /></p>
<p class="hira_flare delayScroll"><a href="#"><img src="image/5_b.webp" /></a></p>
</div>

</div>
	
<div class="container_kasane_flarerib delayScroll">
<div class="conte2">
<p class="color_flare delayScroll"><a href="#"><img src="image/6.webp" /></a></p>
</div>

<p class="point_text6 js-template-ignore-br delayScroll">
	おしゃれ見えも叶えてくれる
	アイテムです。
</p>
	
<div class="conte3">	
<p class="model_flare delayScroll"><a href="#"><img src="image/7.webp" /></a></p>	
</div>	
	
</div>
	

</div>

.box2 {
 width: 100%;
padding: 15% 0 15% 0;
}
.container_kasane_flarerib {
  position: relative;	
width: 100%;
}
.conte2{
width: 100%;
height:auto;
display:flex;
justify-content:flex-start;
	margin: 70px 0 0 0;
    }
.conte2-child {
  width:90%;
  height:auto;
}



/* パラパラここから */
.slider-container-full {
  position: relative;
  width: 70%;
  overflow: hidden;
}

.slideimg_para {
  position: absolute;
 pointer-events: none;
  left: 0;
  width: 100%;
  opacity: 0;
   animation: flip 4s steps(1) infinite !important;
}
 
/* 最初の画像だけ高さの基準にする */
.slideimg_para:nth-child(1) {
  position: relative;
  opacity: 1;
  animation-delay: 0s !important;
}
 
/* 2枚目 */
.slideimg_para:nth-child(2) {
  animation-delay: 1s !important;
}

 
/* 3枚目 */
.slideimg_para:nth-child(3) {
  animation-delay: 2s !important;
}

 
/* 4枚目 */
.slideimg_para:nth-child(4) {
  animation-delay: 3s !important;
}


@keyframes flip {
  0%   { opacity: 1; }
  24.99% { opacity: 1; }

  25%  { opacity: 0; }
  100% { opacity: 0; }
}


.slideimg_para p img{
	width: 680px;
	}


.conte3{
 width: 100%;
 height:auto;
 display:flex;/* 親につける */
justify-content:flex-end;/* 水平方向中央揃え */
    }
.title_flare {
 position: absolute;
 bottom: 550px; /* 上からの距離 */
 margin:auto 0;
}
.title_flare img {
width: 90%;
	}

.hira_flare {
 position: absolute;
 bottom: 270px; /* 上からの距離 */
 margin:auto 0;
}
.hira_flare img {
width: 90%;
	
	}


.model_flare {
position: absolute;
top: -40px; 
margin:auto 0;
}
.model_flare img {
width: 100%;

	}

.color_flare {
 position: absolute;
top: 380px; 
margin:auto 0;
}
.color_flare img {
width: 100%;
	
}


/*===========
  スライドイン
===========*/	
.fadeUp {
  animation-name: fadeUpAnime; /* 下で定義するアニメーションを適用 */
  animation-duration: 0.5s; /* アニメーションの時間は0.5秒 */
  animation-fill-mode: forwards; /* アニメーション終了後、状態を保持 */
  opacity: 0; /* 初期状態は非表示（透明） */
}

/* fadeUpアニメーションの内容 */
@keyframes fadeUpAnime {
  from {
    opacity: 0; /* 最初は透明で */
    transform: translateY(100px); /* 100px下から表示開始 */
  }
  to {
    opacity: 1; /* 完全に表示された状態に */
    transform: translateY(0); /* 元の位置に移動 */
  }
}

<script>
// ふわっと下からフェイドイン
// delayScrollAnime
// -------------------------
// スクロールに応じて、要素の子要素を順番にふわっと表示（フェードイン）させる関数
function delayScrollAnime() {
  var time = 0.2;            // アニメーションのディレイ間隔（秒）
  var value = time;          // 各要素に適用する現在のディレイ時間

  $('.delayScroll').each(function () {
    var parent = this;                      // 親要素（.delayScroll）のDOMを取得
    var elemPos = $(this).offset().top;     // 要素のページ上の位置（上からの距離）
    var scroll = $(window).scrollTop();     // 現在のスクロール量
    var windowHeight = $(window).height();  // ウィンドウの高さ
    var childs = $(this).children();        // .delayScroll の子要素を取得

    // 要素が画面内に入ったかどうかをチェックし、playクラスが付与されていない場合のみ実行
    if (scroll >= elemPos - windowHeight && !$(parent).hasClass("play")) {
      $(childs).each(function () {
        // すでにfadeUpが付与されていない子要素に対してのみ処理
        if (!$(this).hasClass("fadeUp")) {
          $(parent).addClass("play");                   // 処理中フラグとして"play"を付与
          $(this).css("animation-delay", value + "s");  // 遅延時間を設定
          $(this).addClass("fadeUp");                   // アニメーションクラスを付与
          value = value + time;                         // 次の子要素のディレイ時間を加算

          // 最後の子要素まで処理が終わったらplayフラグを外す
          var index = $(childs).index(this);
          if ((childs.length - 1) == index) {
            $(parent).removeClass("play");
          }
        }
      });
    } else {
      // 画面外に出たとき、または条件を満たさないときはアニメーションをリセット
      $(childs).removeClass("fadeUp");
      value = time; // ディレイ時間をリセット
    }
  });
}

// ページが読み込まれた際に delayScrollAnime を実行
// -------------------------
$(window).on('load', function () {
  delayScrollAnime();
});

// スクロールまたはウィンドウサイズ変更時にも実行
// -------------------------
$(window).on('scroll resize', function () {
  delayScrollAnime();
});
</script>

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

ＡＩ活用等しながら修正したのですが

＜変更前＞
.slideimg_para:nth-child(1) {
position: relative;
animation-delay: 0s !important;
}

＜変更後＞
.slideimg_para:nth-child(1) {
position: relative;
opacity:1 !important;
animation-delay: 0s !important;
}

補足

特になし

Comments

[Lhankor_Mhy]

ご提示のコードを試してみましたが、1枚目だけしか表示されないようでした。
ですので、ご質問の問題が再現しませんでした。実際のコードとご提示されたコードが少し違うのかもしれません。

個人的に気になったのは、
/* 最初の画像だけ高さの基準にする */
.slideimg_para:nth-child(1) {
position: relative;

[kimu05]

Lhankor_Mhy様
お世話になっております。
いつもありがとうございます！！
一度ご指摘いただいた部分修正してみます。

Answer 1

以下が原因ではないでしょうか？

.slideimg_para {
  position: absolute;
  pointer-events: none;
  top: 0;　# この指定が不足していたため、一枚目の下の位置と判断されコンテナ外に配置されていた
  left: 0;
  width: 100%;
  opacity: 0;
   animation: flip 4s steps(1) infinite !important;
}

自分の環境でもコメントの方と同様に1枚目しか表示されませんでしたが、この修正で直りました。

Comments

[hiroki-o]

それで正解です。(回答しようと思ったら先をこされた...)
topのデフォルト値はautoなので、overflow: hidden;との組み合わせでそうなりますね。

Answer 2

jsにこだわりが無ければCSSで8秒周期で処理してみては？

<style>
.slider-container-full{position:relation;}
.slideimg_para{position:absolute;opacity: 0;}
.slideimg_para{animation: fadeUp 8s ease infinite;}
:nth-child(2 of .slideimg_para){animation-delay:2s;}
:nth-child(3 of .slideimg_para){animation-delay:4s;}
:nth-child(4 of .slideimg_para){animation-delay:6s;}
@keyframes fadeUp {
  0% {opacity: 0;transform:translateY(20px);}
  10% {opacity: 1;;transform:translateY(0)}
  24% {opacity: 1}
  25% {opacity: 0;}
}
</style>

<div class="conte2-child slider-container-full">
        <!-- 1枚目 -->
        <div class="slideimg_para">
          <p><a href="#"><img src="https://placehold.jp/ff0000/00000/100x100.png?text=1" alt="1枚目"></a></p>
        </div>
        <!-- 2枚目 -->
        <div class="slideimg_para">
          <p><a href="#"><img src="https://placehold.jp/00ff00/00000/100x100.png?text=2" alt="2枚目"></a></p>
        </div>
        <!-- 3枚目 -->
        <div class="slideimg_para">
          <p><a href="#"><img src="https://placehold.jp/0000ff/00000/100x100.png?text=3" alt="3枚目"></a></p>
        </div>
	        <!-- 4枚目 -->
        <div class="slideimg_para">
          <p><a href="#"><img src="https://placehold.jp/ffff00/00000/100x100.png?text=4" alt="4枚目"></a></p>
        </div>
      </div>		
</div>