Nextjs Thumbs is not showing in react-responsive-carousel while using next image

Question

I am using react-responsive-carousel to show the image gallery of products with thumbs, while I am using a simple img HTML element the thums show up but while I use next image the thumbs vanish, I wonder how can I fix this issue.

    <Carousel showThumbs>
      {images.map((image) => (
        <Box>
          <Badge
            badgeContent="30%"
            color="primary"
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'left',
            }}
            sx={{
              position: 'absolute',
              top: '2rem',
              left: '2.5rem',
            }}
          />
          {/* <img src={image.original} alt="ok" />   this word just fine*/}
          {/* this does not show up thumbs */}
          <Image
            src={image.original}
            alt="piece"
            width={image.originalWidth}
            height={image.originalHeight}
          />
        </Box>
      ))}
    </Carousel>

Answer 1

You need to customize the renderThumbs method.

renderThumbs = {() => (
    images.map((image, index) => (
        <Image
            key={index}
            src={image.original}
            alt="piece"
            width={image.originalWidth}
            height={image.originalHeight}
        />
    )))}

Answer 2

It's because react-responsive-carousel can't get image list inside custom components, it can only get from tag or tag inside tag. I think nextjs 's Image components count as custom components too.

ref: https://github.com/leandrowd/react-responsive-carousel/blob/master/TROUBLESHOOTING.md

Answer 3

When I implement Slider with SwipeableViews, I used pure image like this.

• package.json

    "dependencies": {
    ...
    "react-swipeable-views": "^0.14.0",
    "react-swipeable-views-utils": "^0.14.0",
    ...
    }

• slider-carousel-test.js

import SwipeableViews from 'react-swipeable-views';
import { autoPlay } from 'react-swipeable-views-utils';

const AutoPlaySwipeableViews = autoPlay(SwipeableViews);

export default function TestComponent (){
    return (
           <AutoPlaySwipeableViews
                axis='x'
                index={activeStep}//for auto 
                onChangeIndex={handleStepChange}//for user click
                enableMouseEvents
            >
            {
                data.map((elem, idx)=>
                <Box 
                   component="img"
                   sx={{
                      display:'block',
                      overflow:'hidden',
                      width:'100%',
                   }}
                   src={`https://contents.herokuapp.com/images/content${1+idx}.png`}
                   alt="No Image"
                   />
                );
            }
            </AutoPlaySwipeableViews>
    )

}

Because Image from next/image does not provide image for react-responsive-carousel, I recommend you this way...