Added Carousel component.

[AnnMarieW]

This PR adds a Carousel component -- as requested in #582

This is a work in progress and I hope this draft PR will make it easier to review different API options for the component.

Currently dcc.Carousel is a single component. It's possible to create separate components for the captions and headings, but so far, I find it more intuitive to format a slide with all the options in one dictionary.

When you have some time, it might be easier to run carousel.py, then we can discuss in more detail.

[tcbegley]

This looks great! Thanks so much @AnnMarieW!

I was wondering if we should add props like n_clicks_next and n_clicks_previous so that you can hook up advancing the slide to a callback? I suppose you can already connect to the active_index prop so maybe that's not necessary. What do you think? I'm already not so sure of the idea having written it out 😛

Anyway, other than the minor comments I'm very happy with the component itself. It would be great if we could also add some unit tests and some documentation. For documentation most of the sections borrow heavily from the examples in the official Bootstrap documentation. For the tests I think checking that the children are added to the layout with the right classes, and clicking next etc. calls setProps would be great.

Happy to give pointers on either of those if needed!

[AnnMarieW]

Hi @tcbegley I agree with all comments on the code - I'll make your suggested changes.

I think it's not necessary to include the n_clicks_next and n_clicks_previous props since the active_index can be used to control the slides in a callback. There is an example of this in the carousel.py demo app.

What do you think about using the examples in the demo app for the documentation?

[tcbegley]

I think it's not necessary to include the n_clicks_next and n_clicks_previous props since the active_index can be used to control the slides in a callback. There is an example of this in the carousel.py demo app.

Ok perfect, I agree, let's not include them!

What do you think about using the examples in the demo app for the documentation?

Yeah they look good actually, maybe just cross-reference to Bootstrap docs to make sure we're not missing any functionality, but it looks pretty complete!

[AnnMarieW]

Yeah they look good actually, maybe just cross-reference to Bootstrap docs to make sure we're not missing any functionality, but it looks pretty complete!

One functionality that is in the Bootstrap docs that is not included is the cross-fade animation (rather than the slide animation) when changing the slides. There is no prop for that in reactstrap but it's possible to do by including `className="carousel-fade" in the Dash app. Should that just be added as an example?

[tcbegley]

Should that just be added as an example?

Sure why not! You could also submit a fix upstream in reactstrap if you fancy it! I did that a couple of times before when stuff wasn't supported.

I don't think the different animation styles are so important though if either of those options are a hassle.

[AnnMarieW]

It would be easy to add as an example in the docs. It looks like it will be added to reactstrap with their changes for Bootstrap 5.

[tcbegley]

This is really shaping up!

To make the linter pass you'll need to add docs/components_page/components/carousel/callback.py here

[tcbegley]

This looks great! I have two minor queries, but otherwise I think this is basically good to go 🎉

[AnnMarieW]

For now, I also removed the example of formatting the prev and next controls with CSS, since that's not part of the official Bootstrap docs either. (Maybe because people don't do that very often?)

If someone wants to change those, I think it would be easier to hide to Bootstrap prev/next controls, replace them with a dbc.Button and control the slideshow with a callback.

[tcbegley]

Thanks @AnnMarieW! This is great 🚀