css,javascriptを使い、背景画像がランダムで表示させるスライドショーを作りたい

前提

rails で投稿アプリを作っています。
背景画像がスライドショーのように流れるように設定したいのですが、
画像が表示されません。
画像はapp/assets/imagesに保存しています。

https://yukipan-world.com/web-tips/568/#i-2
このサイトの画像の上にテキストを表示させたい場合を参照しています。

また、背景画像をランダムに流すには
javascriptにどのような記述を行えばいいのでしょうか

該当のソースコード

application/html

<body>
<div class="slideBox">
      <p class="title">cssのみでつくったスライド</p>
      <div class="item2" style="background-image: url(./assets/images/1.jpg)"></div>
      <div class="item2" style="background-image: url(./assets/images/2.jpg)"></div>
      <div class="item2" style="background-image: url(./assets/images/first-back.jpg)"></div>
</body>

application/scss

.slideBox {
  height: 500px;
  overflow: hidden;
  position: relative;
}


.title {
  font-size: 32px;
  color: #fff;
  z-index: 11;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.item2 {
  z-index: 10;
  opacity: 0;
  width: 100%;
  height: 500px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30s 0s infinite;
}

.item2:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

.item2:nth-of-type(3) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
}


@keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

AbeTakashi

2022/05/30 03:12

RailsというよりはCSSに関する質問だと思うので、そちらのタグをつけた方が回答が来やすいと思いますよ。タイトルもそのように変えた方がいいかと思います

jus

2022/05/30 03:40

ありがとうございます！

行動規範の内容に同意します

回答1件

ベストアンサー

こうですか？

html
1		<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
2		<script>
3			document.querySelector('.slideBox').append(..._.shuffle(document.querySelectorAll('.item2')))
4		</script>