jQueryでフェードイン/フェードアウトさせてる画像の上に画像を重ねたい。子要素の高さを親要素にも持たせたい。

Question

jQueryでフェードイン/フェードアウトさせてる画像(<div id="slide">内の画像)の上に画像(class="main-visual__text" / class="slide__illust-left" / class="slide__illust-right")を重ねたいのですが、フェードイン・フェードアウト画像にposition:absoluteを指定しており、高さがなくなっているために、上に重ねたい画像のポジションがうまく作れません。

レスポンシブ対応のためid="slide"の大きさの変化に合わせて重ねる画像も可変させたいです。

<section class="main-visual">に子要素<div id="slide">の画像の高さを持たせたいのですが、どうすればいいでしょうか?

<section class="main-visual">
<div id="slide">
    <ul>
        <li><img src="./src/img/top-1.jpg" alt="メインビジュアル１">
        </li>
        <li><img src="./src/img/top-2.jpg" alt="メインビジュアル2">
        </li>
        <li><img src="./src/img/top-3.jpg" alt="メインビジュアル3">
        </li>
    </ul>
</div>
<div class="main-visual__text">
    <img src="./src/img/main_copy_03.svg" alt="いっぱい学ぶ">
    <img src="./src/img/main_copy_02.svg" alt="いっぱい考えて">
    <img src="./src/img/main_copy_01.svg" alt="いっぱい遊んで">
</div>
<img class="slide__illust-left" src="./src/img/illust_02.svg" alt="">
<img class="slide__illust-right" src="./src/img/illust_03.svg" alt="">
</section>

.main-visual{
    position: relative;

#slide{
    ul{
      position: relative;  
    }
    li{
        position: absolute;

        width: 100%;
    }
}

.main-visual__text{
    position: absolute;
    display: flex;
    top: 30%;
    left: 10%;
}

.slide__illust-left{
    width: 21%;
    position: absolute;
    bottom: -10%;
}

.slide__illust-right{
    position: absolute;
    right: 0;
    width: 21%;
    bottom: -10%;
}
}

$(function(){
  //画像の枚数
  var count = $("#slide li").length;

  //現在表示されている画像(最初は１番目の画像)
  var current = 1;

  //次に表示する画像
  var next = 2;

  //フェードイン/アウトのインターバル(何秒ごとに画像を切り替えるか。)
  var interval = 3000;

  //フェードイン/アウトのスピード
  var duration = 1500;

  //タイマー用の変数
  var timer;

  //1番目の写真以外は非表示
  $("#slide li:not(:first-child)").hide();

  //3000ミリ秒(変数intervalの値)ごとにslideTimer()関数を実行
  timer = setInterval(slideTimer, interval);

  //slideTimer()関数
  function slideTimer(){
    //現在の画像をフェードアウト
    $("#slide li:nth-child(" + current + ")").fadeOut(duration);

    //次の画像をフェードイン
    $("#slide li:nth-child(" + next + " )").fadeIn(duration);

    //変数currentの新しい値:変数nextの元の値
    current = next;

    //変数nextの新しい値 : 変数currentの新しい値+1
    next = ++next;

    //変数nextの値が3(画像の総数)を超える場合1に戻す
    if(next > count){
      next = 1;
    }
  }
});

Answer 1

$('#slide img')[0].height;で画像の高さが取得できるので、
$('#slide').css('height','値');これに渡してあげるとか。

let imgHeight = $('#slide img')[0].height;
$('#slide').css('height', imgHeight);

コードを追加する場所はjQueryの中の上の方で良いと思います。

追記　サンプルコード足しました。
要素の取得に失敗していたので添え字を足しました。
コードを追加する箇所を記しました。

Comments

[Fukusuke0604]

ありがとうございます。jQueryに関しては理解がまだ浅く、おっしゃっている事をどのようにコードにしていいのかわかりません。

$('#slide img').height;で画像の高さが取得できるので、
$('#slide').css('height','値');これに渡してあげるとか。

をどのように、どこに書けばいいのか教えてください。

[退会済みユーザー]

今、追記しようとしたら消えちゃったので少々お待ち下さい。
追記　元の回答に追記しましたのでお試しいただけますか。

[Fukusuke0604]

ありがとうございます。

#slideに画像の高さを取得させる事ができました。
しかし、レスポンシブで画像幅を変えるとスライド画像の高さも変わるのですが、#slideの高さはimgの高さの数値のままで可変しません。

レスポンシブに対応させるにはやはりプラグインを使う方がいいのでしょうか?

[退会済みユーザー]

定番のプラグインを使う方が楽そうな気もしますが…

jQueryには`$(window).resize(関数)`というものがあるようです。
先ほどのサンプルコードを以下のように変えて、
`function getHeight(){ この中に高さを取得してCSSを付けるコードを入れる }；`
`$(window).resize(getHeight);`
としてやると、画面幅が変わるたびに画像の高さを取得してCSSを書き換えに行きます。

[Fukusuke0604]

ありがとうございます。

今回書籍を参考にしてですが自分で書いたコードからメインビジュアルのフェードインフェードアウトが実装できたので、なんとかこのまま自作してみたかったのですが、まだまだ自分の知識では、今回のような細かな対応、調整する技術がなさそうです。

プラグインの便利さを知る意味でもいい経験になりました。

ご対応ありがとうございました。
プラグインで試してみます。