Creating Image Slider in ReactJS Example
This example demonstrates a working React Image Slider using the MUI components.
Javascript
// Filename - App.js import React from "react"; import Button from "@material-ui/core/Button"; import MobileStepper from "@material-ui/core/MobileStepper"; import Paper from "@material-ui/core/Paper"; import KeyboardArrowRight from "@material-ui/icons/KeyboardArrowRight"; import Typography from "@material-ui/core/Typography"; import { useTheme } from "@material-ui/core/styles"; import KeyboardArrowLeft from "@material-ui/icons/KeyboardArrowLeft"; // Collection of images with their labels and paths const MyCollection = [ { label: "First Picture", imgPath: "https://media.w3wiki.org/wp-content/uploads/20210208000010/1.png", }, { label: "Second Picture", imgPath: "https://media.w3wiki.org/wp-content/uploads/20210208000009/2.png", }, { label: "Third Picture", imgPath: "https://media.w3wiki.org/wp-content/uploads/20210208000008/3.png", }, ]; const App = () => { const CollectionSize = MyCollection.length; const theme = useTheme(); const [index, setActiveStep] = React.useState(0); // Function to go to the next picture const goToNextPicture = () => { setActiveStep((prevActiveStep) => prevActiveStep + 1); }; return ( <div style={{ marginLeft: "40%", }} > <h2>How to Create Image Slider in ReactJS?</h2> <div style={{ maxWidth: 400, flexGrow: 1, }} > <Paper square elevation={0} style={{ height: 50, display: "flex", paddingLeft: theme.spacing(4), backgroundColor: theme.palette.background.default, alignItems: "center", }} > <Typography>{MyCollection[index].label}</Typography> </Paper> <img src={MyCollection[index].imgPath} style={{ height: 255, width: "100%", maxWidth: 400, display: "block", overflow: "hidden", }} alt={MyCollection[index].label} /> <MobileStepper variant="text" position="static" index={index} steps={CollectionSize} nextButton={ <Button size="small" onClick={goToNextPicture} disabled={index === CollectionSize - 1} > Next {theme.direction !== "rtl" ? ( <KeyboardArrowRight /> ) : ( <KeyboardArrowLeft /> )} </Button> } /> </div> </div> ); }; export default App; |
Output:
How to create Image Slider in ReactJS ?
Image Slider is a dynamic web element that displays a collection of images and has a slider to switch between the Images. It is the most common feature to show image collection in web applications or mobile apps.
Websites like Amazon.com, Flipkart.com, and many e-commerce sites use image sliders to show multiple images of products.
We can create an image slider in ReactJS using Material UI. It has this component available for us and it is very easy to integrate. In this tutorial, we will learn how to create image sliders from scratch using ReactJS.
Before learning how to build an image slider for a web application in ReactJS, you should know the prerequisites so that you can build an image slider without any doubts or issues.
Contact Us