0

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>
DINA TAKLIT
  • 7,074
  • 10
  • 69
  • 74
  • 1
    Can you reproduce the same in codesandbox or any online IDE ? – Lakshya Thakur Apr 09 '22 at 14:32
  • You could try few things: make sure `originalWidth` and `originalHeight` are positive numbers; try to specify `layout` prop - it can be intrinsic, fixed, fill, responsive, raw; compare how both cases are rendered using Elements tab of the Developer tools. – Evgeny Timoshenko Apr 09 '22 at 16:02

3 Answers3

1

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

SC0824
  • 11
  • 1
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}
        />
    )))}
Karthikeyan K
  • 21
  • 1
  • 3
0

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...

Acode
  • 507
  • 5
  • 14