Overview

This post covers a simple example of how to use of React Responsive Carousel and Medium Image Zoom libraries. The end result is an image carousel with a single click zoom feature for every image.

Libraries Needed

MUI – Material UI v5.4.3

Material UI library for React

npm install @mui/material @mui/lab @emotion/react @emotion/styled

React Responsive Carousel and Medium Image Zoom libraries. At the time I wrote this article, I have had some issues with the latest version of react-medium-image-zoom. I recommend trying the versions below to get the carousel and zoom working.

npm install react-medium-image-zoom@4.4.3 react-responsive-carousel@3.2.23

ImageCarouselZoom Component

In ‘\components\ImageCarouselZoom.js’ import Carousel from react-responsive-carousel and Zoom from react-medium-image-zoom. CSS styles for both the Carousel and Zoom components.

import { Carousel } from 'react-responsive-carousel';
import "react-responsive-carousel/lib/styles/carousel.min.css"; 
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

Wrap the HTML ‘img’ with ‘Zoom’ from react-medium-image-zoom.

Source code below is for ‘\components\ImageCarouselZoom.js’.

import React, { Component } from 'react';
import { Carousel } from 'react-responsive-carousel';
import "react-responsive-carousel/lib/styles/carousel.min.css"; 
import Zoom from 'react-medium-image-zoom'
import 'react-medium-image-zoom/dist/styles.css'

export default function ImageCarouselZoom(props) {

    return (     
        <>
            <Carousel showThumbs={false} autoPlay={false} interval={3000} infiniteLoop={true} showArrows={true} showIndicators={true} >            
                {props.data.map((image, index) => (
                    <div key={index}>            
                    <Zoom>
                        <img                         
                        src={image} 
                        style={{maxHeight: '330px', width: 'auto'}}
                        />
                    </Zoom>
                    </div>            
                ))};
            </Carousel>
        </>     
    );
}

App Component

The ‘app.js’ file imports the ImageCarouselBigPic component and renders it inside a MUI <Container/>.
A constant is defined to hold three URLs to placeimg.com.

import React from "react";
import Grid from "@mui/material/Grid";
import ImageCarouselZoom"./components/ImageCarouselZoom";
import { Container } from "@mui/material";
export default function App() {
  const imagesData = ["https://placeimg.com/640/480/any/1","https://placeimg.com/640/480/any/2","https://placeimg.com/640/480/any/3"]
        
    return (
      <Container maxWidth='lg' sx={{mt:9}}>
        <Grid container spacing={4}>
          <Grid item xs={3}>
              <ImageCarouselZoom data={imagesData}/>
          </Grid>
          <Grid item xs={5}>
            
          </Grid>
          <Grid item xs={4}>

          </Grid>
        </Grid>
      </Container>
    ); 
}