Javascript 将类的背景图像制作为幻灯片

我有一个有背景图像的类，这个背景图像有固定的导航栏和一些文本。如何使此背景图像与另外两个图像一起进行幻灯片放映。有人能在不损坏固定导航栏和上面的文本的情况下帮助我吗？ 这是我的密码

      <div id="home" class="intro route bg-image" >

<nav class="navbar navbar-b navbar-trans navbar-expand-md fixed-top" id="mainNav">
    <div class="container">
      <a class="navbar-brand js-scroll" href="#page-top"><%= image_tag "logo.png",class: "logo",alt: "eric chism trail to welness logo" %></a>
      <button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarDefault"
        aria-controls="navbarDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span></span>
        <span></span>
        <span></span>
      </button>
      <div class="navbar-collapse collapse justify-content-end" id="navbarDefault">
        <ul class="navbar-nav">
          <li class="nav-item">
            <a class="nav-link js-scroll active" href="#home">Home</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#about">About</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#service">Services</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#work">Portfolio</a>
          </li>
          <li class="nav-item">
            <a class="nav-link js-scroll" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

    <div class="overlay-itro"></div>
    <div class="intro-content display-table">
      <div class="table-cell">
         <div class="container">
          <h1 class="intro-title mb-4">Eric Chism Trail to Wellness</h1>
          <p class="intro-subtitle"> provides a customized journey to complete health and wellness</span><strong class="text-slider"></strong></p>
          <!-- <p class="pt-3"><a class="btn btn-primary btn js-scroll px-4" href="#about" role="button">Learn More</a></p> -->
        </div>
      </div>
    </div>
  </div>

---

大概你指的是基于时间的幻灯片，而不是用户按下按钮的幻灯片。通常都是用JavaScript处理的。由于您的background元素有子元素，我将通过添加与新的背景图像对应的新类并在它们之间切换来扩展您现有的代码

.bg1{
背景图片：url（资产路径（“img1.png”）；
}
.bg2{
背景图片：url（资产路径（“img2.png”）；
}
.bg3{
背景图片：url（资产路径（“img3.png”）；
}

然后将第一个类添加到背景元素：

并包含JS代码以循环遍历类，如下所示-作为代码片段的一部分包含，以便您可以看到效果

函数updateSlide（）{
const bgCount=3；//这需要与后台类的数量相匹配—这是该代码段的主要缺点
const bgElem=document.getElementById（'home'）；//背景元素
let foundClasses=[]；//找到的后台类列表
设bgIndex=0；
for（让classIndex=0；classIndexbgCount）{
bg指数=1；
}
bgElem.classList.add（'bg'+bgIndex）；//应用新类
bgElem.classList.remove（foundClasses）；//删除所有以前的后台类
}
setInterval（updateSlide，2000）；//每2秒更改一次

#主页{
显示：块；
}
.bg1{
背景：红色；
}
.bg2{
背景：黄色；
}
.bg3{
背景：绿色；
}

---

Test

我创建了一个非常原始的纯CSS解决方案，作为您的良好起点。使用不同的动画和延迟，你可以获得一些非常棒的效果

正文{
保证金：0；
填充：0；
}
.路线{
高度：100vh；
位置：相对位置；
颜色：#fff；
}
navbar先生{
位置：固定；
}
.幻灯片{
位置：相对位置；
身高：100%；
宽度：33.33%；
保证金：0；
浮动：左；
}
.幻灯片-1{
背景图片：url(https://picsum.photos/1200/800?image=11);
}
.幻灯片-2{
背景图片：url(https://picsum.photos/1200/800?image=12);
}
.幻灯片-3{
背景图片：url(https://picsum.photos/1200/800?image=13);
}
.幻灯片放映{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
z指数：0；
溢出：隐藏；
颜色：#000；
}
.幻灯片放映{
位置：相对位置；
身高：100%；
宽度：300%；
动画：移动20秒轻松无限；
}
.简介.简介内容{
文本对齐：居中；
位置：绝对位置；
}
@关键帧移动{
0% {
变换：平移（0,0）；
}
33.33% {
转换：转换（-33.33%，0）；
}
66.66% {
转换：转换（-66.66%，0）；
}
}

一些文本
一些文本
一些文本

正是我想要的：）非常感谢@nourza，很高兴我能帮上忙：）

    .intro {
  height: 100vh;
  position: relative;
  color: #fff;
  background-image: url(asset-path("attachment_1550437745.png"));
}

.intro .intro-content {
  text-align: center;
  position: absolute;
}