How to create React Bootstrap carousel for landing pages

You may have encountered a situation where you need to add a carousel to the landing pages. A carousel is a slide show of images or videos or a combination of both images and videos in a cyclic manner. You can create a carousel from scratch with HTML, CSS, and JavaScript. However, if you use a CSS framework such as React Bootstrap, you can cut down a significant amount of development time. In this post, I will show you how to use React Bootstrap to create a carousel with video and images for a landing page. You can use a carousel in the background, but I am going to use this carousel in the foreground in this post.

Setting up the project with create-react-app

1. Create a React app: npx create-react-app demo-slide-show
2. Create a folder named assets in src folder
3. Add two images and one video clip ( if you do not want to use YouTube video ) to this folder. You can add your own images or download them from the resources section with full code.

Install React Bootstrap

1. Install React Bootstrap: npm install react-bootstrap bootstrap
2. Add the following scripts to public/index.html. You need these script tags for Bootstrap to work

 <script src="https://unpkg.com/react/umd/react.production.min.js" crossorigin></script>
 
    <script
      src="https://unpkg.com/react-dom/umd/react-dom.production.min.js"
      crossorigin></script>
   
    <script
      src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
      crossorigin></script>
   
      <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous"
    />

You can also find installing and setting up browser globals and stylesheets for React bootstrap in the official documentation.

Install React Player

We are going to have a video in our carousel. For this, we are going to use React-Player. Install react-player by running:

npm install react-player

You can also check the installation and related topics in the Official documentation.

Adding the React Bootstrap Carousel in App.js

Replace the code in App.js with the following code

import  Container  from 'react-bootstrap/Container';
import  Carousel from 'react-bootstrap/Carousel';
import  Button  from 'react-bootstrap/Button';
import  Row  from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import Image from 'react-bootstrap/Image'
import ReactPlayer from 'react-player'
import Waterfall from "./assets/waterfall.jpg";
import River from "./assets/river.jpg";
//import demovideo from './assets/tree.mp4'
import './App.css';

function App() {
  
 const youTubeVideo = 'https://www.youtube.com/watch?v=ObYRYF3d38Y';
    

  return (
    <div>
        <Container className="container-home" fluid>   
            
              <Row xs={'auto'}> 
                  <Col md={1 }></Col>
                  <Col className="text-overlay" md={ 10 }  sm={ 8 }>
                  <h1>
                    This is a sample text overlay
                  </h1> 
                  <br />
                  <p>This is a sample text. You may design it as you need based on responsive design</p>
                  <Button size="lg" variant="success">Learn More</Button>{' '}     
                  </Col>       
                
              </Row>      
               
      </Container>
      <Carousel  fade>
              <Carousel.Item>
              <div className="player-wrapper  d-block w-100">
                  <ReactPlayer                  
                  className="react-player"                 
                    // url={ demovideo }      
                    url={ youTubeVideo }      
                    loop = { true }
                    height={'100%' }  
                    width={'auto'}                          
                    muted={true}            
                    playing={true }      
                                        
                  />     
                </div>       
              </Carousel.Item>
              <Carousel.Item>
                <Image
                  className="d-block w-100" 
                  src= { Waterfall }
                  alt="waterfall"                 
                  height={'100%' }  
                  width={'100%'}         
                  
                />              
              </Carousel.Item>
              <Carousel.Item>
              <Image
                  className="d-block w-100"
                  src= { River }
                  alt="river"
                  height={'100%' }  
                  width={'100%'}         
                
                />              
              </Carousel.Item>              
            </Carousel>       
   
            <Container className="container-home" fluid>   
            
            <Row xs={'auto'}>                 
                <Col>
                <h1>
                  Thi is a sample heading
                </h1> 
                <p>You can add whatever text you need 
                  </p>     
               
                </Col>       
              
            </Row>      
             
    </Container>
    </div>
  );
}

export default App;

Note: if you decided to add a video clip, instead of using a YouTube video clip, make sure to comment the <React.StrictMode> tags in index.js. Otherwise, the video will not play.

As you can see in the above code, I have used the pre-defined Bootstrap classes ( className="d-block w-100" ). You can safely remove these classes. The reason for this is I stretch each carousel item by 100vh. You can see that in the CSS code below.

I keep className="d-block w-100" for you to do your experiments with the code. If you keep this class and remove “min-height: 100vh” from .player-wrapper class, and “height: 100vh” from the .carousel-item class in the CSS code below, you will still get a responsive screen. But, it is different than what I want to show in this post. You may need that type of responsive design for another project with different requirements. But, it may not ideal for landing pages.

In addition, if you remove the”min-height: 100vh” and “height: 100vh“, and keep predefined Bootstrap classes( className="d-block w-100"), the carousel controller arrows bounce as the images changes. This could be because Boostrap set the height of images to auto. You can remove this bouncing effect by using images with the same height.

Adding the CSS Code in App.css

Now, it’s time to add the CSS code. Replace the existing App.css code with the following CSS code. After that, you can start the app executing npm start in the terminal.

.container-home{
  position: absolute;
  z-index: 2;   
  text-align: left;
  padding-top: 13vw;
}

/*creates an overlaying div covering the items in the carousel */
.carousel-item::after{ 
  content:"";
  position:absolute;
  z-index: 900; 
  top:0;
  bottom:0;
  left:0;
  right:0;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.5));     
}

.text-overlay{
  margin-left: 2vw;
  color: white;
}

.text-overlay h1{
  font-size: 8vmin;
  line-height: 1em;
 
}

.text-overlay p{
  font-weight: 500;
  font-size: 3vmin;
}

.player-wrapper { 
  position: relative;
  padding-top: 56.25%; 
  min-height: 100vh;/*streches the video player covering the viewport*/
 
}

.react-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important; /*this is important if you add a YouTube vedio*/
}

/* this is if you add a YouTube vedio for covering the viewport on small devices */
iframe {
  min-width: 178vh;
}

.carousel-control-next, .carousel-control-prev, .carousel-indicator{
  z-index: 2 !important;
}


.carousel-item{
  height: 100vh;/*streches the carosel items covering the viewport */
}


 /* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) { 

  .text-overlay{
    margin-left: 1vw;
  }

} 

 /* Small devices (less than 768px) */
@media (max-width:768px) { 

  .text-overlay{
     margin-left: 8vw;
  }

}

YouTube video vs Video clips in React player

When you add a Youtube video in react-player, it will be embedded in an HTML iframe, whereas if you as a video clip, it will be used in an HTML video tag. I added iframe { min-width: 178vh; } to handle the responsiveness I need for this post. Remove this class and see how the YouTube video behaves. You will still get a complete view of the YouTube video.

I added width: 100% !important to the .react-player class to set the width of the YouTube videos( especially on large screens ). Note that in App.js the ReactPlayer’s width is set to auto ( width={‘auto’} ). This works fine for video clips from large to small screens. On small screens, min-height: 100vh in .player-wrapper class will is especially important as it stretches the video clip to cover the viewport. However, width={‘auto’} behaves differently for YouTube videos. Therefore, I added width: 100% !important to the .react-player class.

Resources

• Full code with images and video

• React-Bootstrap installation guide

• React-Bootstrap Carousels

• Official Documentation for React-Player