css - React Bootstrap 轮播图像作为背景

Question

我有一个实现 React Bootstrap 的项目。现在我希望将背景更改为轮播，以便我实现下面的代码但没有任何反应。有人能告诉我代码有什么问题吗？

此外，每当背景发生变化时，有人也可以帮助我吗？与图像相关的文本也会发生变化？例如，我们有图像 1 的文本是“星期一”，然后背景更改为图像 2，然后将显示与图像 2 关联的文本“星期二”...

谢谢

主页.js

import React from 'react';
import "./homeStyle.CSS";
import { Navbar, NavItem, NavDropdown, MenuItem, Nav, Form, FormControl, Button } from 'react-bootstrap';
import "./components/containers/Menu.css";
import "./homeScript";
import { Widget } from '@typeform/embed-react'
import logo from "./components/img/logo.png";

export default function Home() {
    return(
        <div>
        <div className='App tc f3'>
               <Navbar bg='dark' expand='lg'>
                 <Navbar.Brand href="">
                    <img src={logo}/>
                 </Navbar.Brand>
                 <Navbar.Toggle aria-controls="basic-navbar-nav" />
                 <Navbar.Collapse id="basic-navbar-nav">
                   <Nav className='ml-auto'>
                     <Nav.Link href="#home"><button type="button">Login</button></Nav.Link>
                   </Nav>
                 </Navbar.Collapse>
               </Navbar>
             </div>
             <div id="myCarousel" className="carousel container slide">
                <div className="carousel-inner">
                  <div className="active item one" />
                  <div className="item two" />
                  <div className="item three" />
                  <div className="item four" />
                  <div className="item five" />
                </div>
              </div>
</div>
    )
}

CSS：

*{


margin: 0;
  padding:0;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
}

.carousel { z-index: -99; } /* keeps this behind all content */
.carousel .item {
    position: fixed; 
    width: 100%; height: 100%;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -ms-transition: opacity 1s;
    -o-transition: opacity 1s;
    transition: opacity 1s;

}
.carousel .one {
    background: url(./components/img/kid1_1600x900.jpeg);
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .two {
    background: url(./components/img/Elderly2_1600x900.jpg);
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .three {
    background: url(./components/img/elderly3_1600x900.jpg);
    background-size: cover;
    -moz-background-size: cover;
}
.carousel .four {
  background: url(./components/img/yourself_1600x900.jpg);
  background-size: cover;
  -moz-background-size: cover;
}
.carousel .five {
  background: url(./components/img/kid5_1600x900.jpg);
  background-size: cover;
  -moz-background-size: cover;
}
.carousel .active.left {
    left:0;
    opacity:0;
    z-index:2;
}

homeScript.js：

$(document).ready(function() {
$('.carousel').carousel({interval: 7000});

});

标签： cssreactjsbootstrap-4react-bootstrap