文字をCSSのみでスライドショーにしたい

Question

CSSのみで画像のスライドショーを作成することができたのですが、その画像を説明するための文章もスライドショーにして実装したいと考えています。

imgタグと同じ考えでは実装できないことはわかるのですが、文字のみをCSSでスライドショーにすることはできないのでしょうか？

以下にimgタグでスライドショーを作成したHTMLとCSSを記載しております。
文字のみのスライドショーを作成するためにはどの部分をどのように変更すればよいのか教えていただきたいです。

<div class="slider4">
   <p class="slider-4-img">1</ｐ>
   <p class="slider-4-img">2</ｐ>
   <p class="slider-4-img">3</ｐ>
   <p class="slider-4-img">4</p>
</div>

.slider4{
  width: 60%;
  height: 60%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  position: relative;
  user-select: none;
}

.slider4-img{
  position: absolute;
  object-fit: cover;
  width: 100%;
  height: 100%;
  left: 0;
  animation :slideshow4 14s linear infinite;
  opacity: 0;
}

@keyframes slideshow4{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  20%{
    opacity: 1
  }
  30%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

.slider4-img:nth-of-type(1) { animation-delay: 0s }
.slider4-img:nth-of-type(2) { animation-delay: 3.5s }
.slider4-img:nth-of-type(3) { animation-delay: 7s }
.slider4-img:nth-of-type(4) { animation-delay: 10.5s }

Comments

[cerfweb]

できます。ただ、作成されたコードを提示された方が具体的なアドバイスが得られると思いますよ。

[_mini]

画像のスライドショーを作成する際に使用したものをほぼ流用しているのでCSSは全く違うと思いますが、コードも提示いたしました。
ご教授いただけると幸いです。

Answer 1

HTMLのクラス名と閉じタグを修正

<div class="slider4">
   <p class="slider4-img">1</p>
   <p class="slider4-img">2</p>
   <p class="slider4-img">3</p>
   <p class="slider4-img">4</p>
</div>

CSSは、
文字のサイズやレイアウトが不明なので、親要素の高さの半分の文字サイズで中央寄せにする場合のコード例。
親要素の height は%指定すると中身の高さが0なので0になりますので、vw単位にする必要があります。

.slider4{
  width: 60vw;
  height: 60vw;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  user-select: none;
  border: 1px solid gray;
}

.slider4-img{
  font-size: 30vw;
  line-height: 2;
  text-align: center;
  margin: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  animation :slideshow4 14s linear infinite;
  opacity: 0;
}

@keyframes slideshow4{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  20%{
    opacity: 1
  }
  30%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

.slider4-img:nth-of-type(1) { animation-delay: 0s }
.slider4-img:nth-of-type(2) { animation-delay: 3.5s }
.slider4-img:nth-of-type(3) { animation-delay: 7s }
.slider4-img:nth-of-type(4) { animation-delay: 10.5s }

Comments

[_mini]

無事に実装することができました、ありがとうございます。

２つお聞きしたいことがあります。
①heightがvhではなく、vwの理由はなんですか？
②文字を増やし、font-sizeに変更を加えたい場合はどのように手を加えればよいのでしょうか？

[hatena19]

①
どのようなレイアウトにしたいのか分からないのでこちらで適当に判断して正方形になるように設定したためです。
②
その前に、スクロールするボックスのサイズはどうしたいのですか？
固定値で縦横固定なのか、幅は画面サイズにあわせるのか、高さはどうしたいのか。
それを明確にしてください。でないと回答しようがありません。

[_mini]

どちらとも解答ありがとうございます。アドバイスをより自分で考え、heightやfont-sizeをいじってみたところ自分の行いたい形を作成することができました。

Answer 2

   <p class="slider-4-img">1</ｐ>
   <p class="slider-4-img">2</ｐ>
   <p class="slider-4-img">3</ｐ>
   <p class="slider-4-img">4</p>

上記上から3行分の閉じタグが全角になっています。
あと、class名が間違っているようです。

   <p class="slider4-img">1</p>
   <p class="slider4-img">2</p>
   <p class="slider4-img">3</p>
   <p class="slider4-img">4</p>

とすれば大丈夫じゃないでしょうか。