carousel with nodes for slide content and caption

src/components/carousel/Carousel.js

@@ -45,17 +45,9 @@ const Carousel = props => {
         as={item.href ? Link : 'div'}
         {...additionalProps}
       >
-        <img
-          src={item.src}
-          className={item.img_class_name || item.imgClassName}
-          style={item.img_style}
-          alt={item.alt}
-        />
-        <RBCarousel.Caption
-          className={item.caption_class_name || item.captionClassName}
-        >
-          {item.header && <h5>{item.header}</h5>}
-          {item.caption && <p>{item.caption}</p>}
+        {item.children}
+        <RBCarousel.Caption>
+          {item.caption}
         </RBCarousel.Caption>
       </RBCarousel.Item>
     );
@@ -125,45 +117,15 @@ Carousel.propTypes = {
        */
       key: PropTypes.string,
       /**
-       * The URL of the image
+       * The slide content
        */
-      src: PropTypes.string,
-      /**
-       * The alternate text for an image, if the image cannot be displayed
-       */
-      alt: PropTypes.string,
-      /**
-       * The className for the image.  The default is 'd-block w-100'
-       */
-      img_class_name: PropTypes.string,
-      /**
-       * **DEPRECATED** Use `img_class_name` instead.
-       *
-       * The className for the image.  The default is 'd-block w-100'
-       */
-      imgClassName: PropTypes.string,
-      /**
-       * The style for the image
-       */
-      img_style: PropTypes.object,
-      /**
-       * The header of the text on the slide. It is displayed in a <h5> element
-       */
-      header: PropTypes.string,
-      /**
-       * The caption of the item.  The text is displayed in a <p> element
-       */
-      caption: PropTypes.string,
-      /**
-       * The class name for the header and caption container
-       */
-      caption_class_name: PropTypes.string,
+      children: PropTypes.node,
+
       /**
-       * **DEPRECATED** Use `caption_class_name` instead.
-       *
-       * The class name for the header and caption container
+       * The slide caption
        */
-      captionClassName: PropTypes.string,
+      caption: PropTypes.node,
+
       /**
        * Optional hyperlink to add to the item. Item will be rendered as a
        * HTML <a> or as a Dash-style link depending on whether the link is

usage_carousel.py

@@ -0,0 +1,53 @@
+from dash import Dash, html, dcc, callback, Input, Output
+import dash_bootstrap_components as dbc
+import plotly.express as px
+
+df = px.data.tips()
+
+app = Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
+
+slide1 = "https://raw.githubusercontent.com/facultyai/dash-bootstrap-components/main/docs/static/images/slide1.svg"
+slide2 = "https://raw.githubusercontent.com/facultyai/dash-bootstrap-components/main/docs/static/images/slide2.svg"
+slide3 = html.H1("HI! This is a random component", style={"height": 800, "padding":100}, className="text-center")
+slide4 = html.Div(
+    [
+        html.H4("Restaurant tips by day of week"),
+        dcc.Dropdown(["Fri", "Sat", "Sun"], "Fri", clearable=False, id="day"),
+        dcc.Graph(id="graph"),
+    ],
+    className="border",
+    style={"height": 800, "padding": 100},
+)
+
+carousel = dbc.Carousel(
+    items = [
+        {
+            "key": "1",
+            "children": html.Img(src=slide1, width="100%"),
+            "caption": html.Div("Slide 1 caption"),
+        },
+        {"key": "2", "children": html.Img(src=slide2, width="100%")},
+        {
+            "key": "3",
+            "children": slide3,
+            "caption": html.H1("Hi Again", className="text-primary"),
+        },
+        {"key": "4", "children": slide4, "caption": "Slide 4 caption"},
+    ],
+    interval=2000,
+    ride="carousel",
+    variant="dark"
+)
+
+app.layout = dbc.Container([carousel])
+
+
+@callback(Output("graph", "figure"), Input("day", "value"))
+def update_bar_chart(day):
+    mask = df["day"] == day
+    return px.bar(
+        df[mask], x="sex", y="total_bill", color="smoker", barmode="group"
+    )
+
+
+app.run(debug=True)