Main Example from Example Demos

[Marcussafar]

Would it be possible for the Examples to be updated to include how to render the first (in the gif) on this page? https://express-labs.github.io/pure-react-carousel/

Anyone that is main contributor might know where this exists? I have searched everywhere.

Thanks!

[Derick1530]

did you get the example? looking for it too

[gabefo]

I was also looking for that example, but I had no success. After reading the documentation, I came up with the following solution:

<CarouselProvider naturalSlideWidth={600} naturalSlideHeight={600} totalSlides={images.length}>
  <div className="carousel-thumbs">
    {images.map((src, index) => (
      <Dot key={src} slide={index} disabled={false}>
        <img alt="thumbnail" src={src} />
      </Dot>
    ))}
  </div>

  <Slider>
    {images.map((src, index) => (
      <Slide key={src} index={index}>
        <img alt="slide" src={src} />
      </Slide>
    ))}
  </Slider>
  
  <ButtonBack>
    <ArrowBackIcon />
  </ButtonBack>
  <ButtonNext>
    <ArrowForwardIcon />
  </ButtonNext>
</CarouselProvider>

After that, you just have to add some styles

[thiago-diniz]

You can use dots to render images thumb, follow this example:

<CarouselProvider {...config}>
    <DotGroup
        renderDots={
            () => (
                images?.map((thumb, index) => (
                    <Dot
                        key={thumb.imageId}
                        slide={index}
                    >
                        <img
                            src={thumb.imageUrl}
                            alt={thumb.imageText}
                            height={75}
                            width={75}
                        />
                    </Dot>
                ))
            )
        }
    />

    <Slider>
        {
            images?.map((thumb, index) => (
                <Slide key={thumb.imageId} index={index}>
                    <img
                        src={thumb.imageUrl}
                        alt={thumb.imageText}
                        height={570}
                        width={570}
                    />
                </Slide>
            ))
        }
    </Slider>
</CarouselProvider>