レスポンジブで、フェードアウトするスライドショーを作りたい

Question

width: 100%が使えて、なおかつ、横にスライドするのではなくフェードイン、フェードアウトでふわっと画像が切り替わるスライドショーを作りたいです。

下記のコードを書くと、一応実現ができるのですが、スライドショーの記述のあとの要素がスライドショーと重なって表示されてしまうので、使えないです。

<div>
  <img src="slideshow1.png">
  <img src="slideshow2.png">
  <img src="slideshow3.png">
</div>

div {
  position: relative;
}

div img {
  position: absolute;
  width: 100%;
}

var $slides = $('div img'),
    slideCount = $slides.length,
    currentIndex = 0;

$slides.eq(currentIndex).fadeIn();
setInterval(showNextSlide,2000);

function showNextSlide(){
 var nextIndex = (currentIndex + 1) % slideCount;
 $slides.eq(currentIndex).fadeOut();
 $slides.eq(nextIndex).fadeIn();
 currentIndex = nextIndex;
}

Answer 1

スライドショーの記述のあとの要素がスライドショーと重なって表示されてしまう

簡単に対応するならば、高さをつければいいかもしれません。

div {
	position: relative;
	height: 100vh; /* たとえば */
}

Comments

[yukarichang]

コメントありがとうございます。教えて頂いたコードを打ってみて、確かに次に続く要素と被らないようには出来たのですが、ビューポートを縮めるに従って余計な余白が生まれてしまいます(;-;)(上記コードのdivに背景色を付けると私の言っていることが分かると思います)余談ですがhttps://www.kirinholdings.com/jp/ ←まさにこのサイトのスライドショーのようにしたいです。

Answer 2

img要素にposition: absolute;とすることで通常フローから外れるので、親要素からみると存在しないことになり、親要素の高さが0になるため、次の要素がimg要素に重なります。
親要素に明示的に高さを指定しましょう。

レスポンシブとのことですが、画面サイズに合わせてどのようにレイアウトするのか不明なので、スライドショーを画面一杯に表示させるということだとすると下記にようにすればいいでしょう。

<div class="slideshow">
  <img src="slideshow1.png">
  <img src="slideshow2.png">
  <img src="slideshow3.png">
</div>

div.slideshow {
  position: relative;
  height: 100vh;
}

div img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

画像そのものが縦横比を保ったまま収縮拡大させたいのです。

padding-top は横幅を基準にするのでそれを使うといいでしょう。

div.slideshow {
  position: relative;
  padding-top: 70%; /* 縦横比100:70の場合 */
}

div img {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

CodePenサンプル

Comments

[yukarichang]

コメントありがとうございます。教えて頂いたコードを打ってみたのですが、画像の中央が切り取られる感じではなくて、画像そのものが縦横比を保ったまま収縮拡大させたいのです。https://www.kirinholdings.com/jp/ ←まさにこのサイトみたいな感じに。

[hatena19]

回答に追記しましたので、ご参照ください。

[yukarichang]

すごいです！長年の疑問が解決されました。本当にありがとうございます。