React JS use bootstrap carousel multiple times in a page with reactstrap

Question

I am struggled with using bootstrap carousel multiple times in a page.

I have tried lot with copy as a new item, but its shows error all time.

https://reactstrap.github.io/components/carousel/

<CarouselItem
  onExiting={() => setAnimating(true)}
  onExited={() => setAnimating(false)}
  key={item.src}
>
  <img src={item.src} alt={item.altText} />
  <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
</CarouselItem>

..

<CarouselItem
  onExiting={() => setAnimating(true)}
  onExited={() => setAnimating(false)}
  key={item2.src}
>
  <img src={item2.src} alt={item2.altText} />
  <CarouselCaption captionText={item2.caption} captionHeader={item2.caption} />
</CarouselItem>

Is it need to copy the entire things again?

Sandbox: https://codesandbox.io/s/zealous-wilbur-yeonm?file=/src/App.js

I see no error in your sandbox, did you mean the warning in console log? — hgb123, Commented Aug 21, 2020 at 17:19

imgnx · Accepted Answer · 2020-08-23 08:01:12Z

2

You just copy the Carousel component along with the variables and event handlers like so: https://codesandbox.io/s/sweet-ellis-43cbz?file=/src/App.js

A CarouselItem is an image. The entire carousel itself is the Carousel component.

If you need the carousels to work independently, you should create separate variables and handlers for each carousel.

edited Aug 23, 2020 at 8:01

answered Aug 21, 2020 at 16:39

imgnx

7982 gold badges13 silver badges30 bronze badges

1

@vishnu You need separate handlers/variables for activeIndex, next, previous, activeIndex, activeIndex, and goToIndex. I'll update the sandbox. Give me a second.
– imgnx
Commented Aug 21, 2020 at 16:47
1

@vishu Check it now codesandbox.io/s/sweet-ellis-43cbz?file=/src/App.js
– imgnx
Commented Aug 21, 2020 at 16:52
1

@vishnu Yes. What you could do is .map() the items out from a multidimensional array into your JSX, but for all intents and purposes, this should work just fine. Here's how to do that if you want, but the code from the CodePen works as-is. reactjs.org/docs/lists-and-keys.html
– imgnx
Commented Aug 21, 2020 at 17:00
1

@vishnu you would still have to create separate event handlers, though, so this is probably the optimal solution.
– imgnx
Commented Aug 21, 2020 at 17:01
1

checking with my code & let you know if it is working.. :)
– vishnu
Commented Aug 21, 2020 at 17:03

| Show 4 more comments

Collectives™ on Stack Overflow

React JS use bootstrap carousel multiple times in a page with reactstrap

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related