React-Bootstrap Carousel Dark variant
React-Bootstrap is a front-end framework that was designed keeping React in mind. Carousel Component provides a way to create a slideshow for our images or text slides in a present full manner in a cyclic way. In this article, we will learn about React-Bootstrap Carousel Dark variant.
Technologies Used
There are two approaches to add dark variant to the carousel in the React-Bootstrap:
Table of Content
- Using variant=”dark”
- Setting data-bs-theme=”dark”
Steps to create React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-bootstrap
npm install bootstrap
Project Structure: It will look like the following.
Approach 1: Using variant=”dark”
In this approch, on the root element, a parent wrapper, or the component itself for darker controls, indicators, and captions.
Syntax:
<Carousel variant="dark">
...
</Carousel>
Example: In this example, we can see dark variant of the controls and indicators using variant=”dark”. Here, App is our default component where we have written our code.
Javascript
import React, { useState } from 'react' ; import Carousel from 'react-bootstrap/Carousel' ; export default function App() { return ( <div style={{ display: 'block' , width: 700, padding: 30 }}> <h2 style={{ color: 'green' }}>w3wiki</h2> <h2>React-Bootstrap Carousel Dark variant</h2> <Carousel variant= "dark" > <Carousel.Item interval={1500}> <img className= "d-block w-100" src= "https://media.w3wiki.net/wp-content/cdn-uploads/Java.png" alt= "JAVA" /> </Carousel.Item> <Carousel.Item interval={1500}> <img className= "d-block w-100" src= "https://media.w3wiki.net/wp-content/cdn-uploads/20220401124017/HTML-Tutorial.png" alt= "HTML" /> </Carousel.Item> <Carousel.Item interval={1500}> <img className= "d-block w-100" src= "https://media.w3wiki.net/wp-content/cdn-uploads/20210322182256/AngularJS-Tutorial.png" alt= "Angular" /> </Carousel.Item> </Carousel> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output:
Approach 2: Setting data-bs-theme=”dark”
In this approach, on the root element, a parent wrapper, or the component itself for darker controls, indicators, and captions.
Syntax:
<Carousel data-bs-theme="dark">
...
</Carousel>
Example: In this example , we will set data-bs-theme=”dark” on the root element, a parent wrapper, or the component itself for darker controls, indicators, and captions.
Javascript
import React,{useState} from 'react' ; import Carousel from 'react-bootstrap/Carousel' ; export default function App() { return ( <div style={{ display: 'block' , width: 700, padding: 30 }}> <h2 style={{ color: 'green' }}>w3wiki</h2> <h2>React-Bootstrap Carousel Dark variant</h2> <Carousel data-bs-theme= "dark" > <Carousel.Item interval={1500}> <img className= "d-block w-100" src= "https://media.w3wiki.net/wp-content/uploads/20210425122739/2-300x115.png" alt= "Image One" /> <Carousel.Caption> <h6>Label for first slide</h6> <p>Sample Text for Image One</p> </Carousel.Caption> </Carousel.Item> <Carousel.Item interval={1500}> <img className= "d-block w-100" src= "https://media.w3wiki.net/wp-content/uploads/20210425122716/1-300x115.png" alt= "Image Two" /> <Carousel.Caption> <h6>Label for second slide</h6> <p>Sample Text for Image Two</p> </Carousel.Caption> </Carousel.Item> </Carousel> </div> ); } |
Output:
Contact Us