Example of Responsive Carousel in React
Code: Create the required files as seen in the folder structure and add the following codes.
CSS
/* Carousel.css */ .full-width-carousel { width : 100% ; margin : 0 auto ; } .full-width-slide { width : 100 vw; height : 60 vh; display : flex; justify- content : center ; align-items: center ; } .full-width-slide img { max-width : 100% ; max-height : 100% ; object-fit: cover; } .slide-image { width : 100% ; height : auto ; } |
Javascript
//App.js import Carousel from "./Components/Carousel" ; function App() { return ( <> <h2 style={{ textAlign: "center" }}>Carousel Show</h2> <Carousel /> </> ) } export default App; |
Javascript
//Carousel.jsx import React from 'react' ; import Slider from 'react-slick' ; import './Carousel.css' ; import 'slick-carousel/slick/slick.css' ; import 'slick-carousel/slick/slick-theme.css' ; const Carousel = () => { const settings = { dots: true , infinite: true , speed: 500, slidesToShow: 1, slidesToScroll: 1, appendDots: dots => ( <div> <ul style={{ margin: "0px" , padding: "0px" }}> {dots} </ul> </div> ), responsive: [ { breakpoint: 1024, settings: { slidesToShow: 1, slidesToScroll: 1, infinite: true , dots: true } }, { breakpoint: 600, settings: { slidesToShow: 1, slidesToScroll: 1, initialSlide: 1 } } ] }; return ( <> <div className= "full-width-carousel" > <Slider {...settings}> <div className= "full-width-slide" > <img src= "https://media.w3wiki.org/wp-content/uploads/20240307153443/w3wiki-Offline-Classes.webp" alt= "Slide 1" className= "slide-image" /> </div> <div className= "full-width-slide" > <img src= "https://media.w3wiki.org/wp-content/uploads/20240307153531/w3wiki-Classroom-Program---DSA-For-Interview-Preparation-Course.webp" alt= "Slide 2" className= "slide-image" /> </div> <div className= "full-width-slide" > <img src= "https://media.w3wiki.org/wp-content/uploads/20240307153605/School-programming.png" alt= "Slide 3" className= "slide-image" /> </div> </Slider> </div> </> ); }; export default Carousel; |
To start the application run the following command.
npm start
Output:
How to create a Responsive Carousel in React JS ?
A carousel, often seen in web and mobile applications, is a user interface component used to display a set of content items such as images or text in a rotating manner. It allows users to view multiple items within a limited space by scrolling horizontally or vertically through the content.
In this article, we will look at how to create a responsive carousel for a website built with React JS without using Bootstrap or any other CSS framework.
Output Preview: Let us have a look at how the final output will look like.