Topic: Full Page Video Carousel
roshanpr pro asked 6 years ago
arooly pro answered 6 years ago
roshanpr pro answered 6 years ago
Hi arooly, here is the code I used to get the video carousel to work. The HomePage component was imported into the App component which had the navbar. import React from 'react'; import backvideo from './back3.mp4' class HomePage extends React.Component { render(){ return( <div> <div className='carousel-fluid slide carousel-fade' data-ride='carousel' data-interval='false'> <div className='carousel-inner'> <div className='carousel-item active'> <div className='view'> <video autoPlay loop> <source src={backvideo} type='video/mp4' /> </video> <div className='full-bg-img flex-center mask gba-black-dark white-text'> <ul className='animated fadeInUp col-md-12 list-unstyled list-inline'> <li> <div className="hm-gradient"> <div className="full-bg-img"> <div className="container flex-center"> <div className="row pt-5 mt-3"> <div className="col-lg-6 wow fadeIn mb-5 text-center text-lg-left"> <div className="white-text"> <img src={logo1} className="img-fluid" alt="" height='200px' width='300px'/> <h1 className="h1-responsive font-weight-bold wow fadeInLeft" data-wow-delay="0.3s">Robots</h1> <hr className="my-2 white" /> </div> </div> </div> </div> </div> </div> </li> </ul> </div> </div> </div> </div> </div>
arooly pro answered 6 years ago
arooly pro answered 6 years ago
I think the question was if you have the full React code from video carousel full page including navigation, router and footer:
https://mdbootstrap.com/previews/docs/latest/html/carousel/video/index.html
This will have been very helpful for us to use as a template.
Keep in mind some of us, we are not very savvy with React and this is the reason we use MDB
Jakub Strebeyko staff answered 6 years ago
<CarouselItem>
s, so it is just about replacing static images with movie-like media. Moreover, Carousel component is fluid by default, meaning it takes up as much space for width as it is possible. It adjusts to encompassing element - to make it full page means to not constrain it horizontally and give it height: 100vh
.
With Best Regards,
Kuba
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No