CSS – Express bootstrap carousel images as background

  • Home / Blog / CSS – Express…

CSS – Express bootstrap carousel images as background

I have a project that will have a bootstrap reaction. Now I want to change the background as a so I applied the code below but nothing happens. Can someone tell me if there is something wrong with the codes?

Also, can anyone help me whenever I want, whenever the background changes, the text associated with the icon also changes? For example, we have the text “Monday” with text 1, then the background will be changed to image 2, then the text “Tuesday” will be shown attached to image 2 …

Thanks

Home.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.

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

});

Write a Comment

Your email address will not be published. Required fields are marked *

x