question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Index attribute does not update the carousel element being displayed

See original GitHub issue

I’m working on something that require the carousel to switch element programmatically, I have something like the following:

<Carousel index={activeChapter} autoPlay={false} animation="slide" navButtonsAlwaysInvisible={true} swipe={false}>
  <div key={0}>0</div>
  <div key={1}>1</div>
  <div key={2}>2</div>
</Carousel>

The activeChapter is a number stored in redux. However when activeChapter updates, the carousel does not switch page.

It appears that the carousel only respects the initial value of activeChapter shows the correct corresponding page upon initial render, but would not update when the activeChapter changes.

I’m currently using react v17, mui v5.2.

Am I using the index attribute wrong, or is this a bug?

Sincerely, Oscar

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
Learuscommented, Dec 8, 2021

Fixed in 3.1.1

0reactions
jacobikedichicommented, Mar 11, 2022

I’m seeing the same bug in 3.2.0

@Learus Could you please take a look at this? Thank you very much…

Read more comments on GitHub >

github_iconTop Results From Across the Web

Problems with `track by $index` with Angular UI Carousel
When the carousel is first loaded, the index is 0. When it moves to the next slide the index is 1, when you...
Read more >
Carousel - Bootstrap
The carousel is a slideshow for cycling through a series of content, built with CSS 3D transforms and a bit of JavaScript. It...
Read more >
Auto-Rotating Image Carousel Example with Buttons for Slide ...
In the view of this carousel where the controls and captions are displayed inside the image, background images could cause color contrast for...
Read more >
<af:carousel> - Oracle Help Center
The number of rows that are displayed on the client should generally be just ... Attribute change events are not delivered for any...
Read more >
ons-carousel - Onsen UI
The <ons-carousel> element has a large number of attributes that control its behavior. By default the carousel can not be controlled by swiping....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found