# Update Image carousels using Callbacks

**URL:** <https://community.plotly.com/t/update-image-carousels-using-callbacks/55482>\
**Category:** Dash Python\
**Created:** [August 11, 2021, 7:47pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482 "2021-08-11T19:47:27Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![keval](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@keval](https://community.plotly.com/u/keval)\
**Post date:** [August 11, 2021, 7:47pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/1 "2021-08-11T19:47:27Z")

</div>

1. Is there a way to add image carousels in a Dash Application? I didn’t see any component in Dash Libraries that would work.

2. I’d like to add a carousel to `Modal` pop-up. Would this be possible to do?

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 11, 2021, 8:08pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/2 "2021-08-11T20:08:36Z")

</div>

Hi @keval

There is an image carousel in the latest release of Dash Bootstrap Components v0.13.0. Here is the announcement:

> [@Dash Bootstrap Components v0.13.0 New Carousel Component, R and Julia examples](https://community.plotly.com/t/dash-bootstrap-components-v0-13-0-new-carousel-component-r-and-julia-examples/55347):
>
> mega Introducing: The Carousel component Be sure to upgrade to the latest release of dash-bootstrap-components v0.13.0 and take the new Carousel component for a spin. Use it to create a slideshow that cycles through a series of images and text. It also includes support for previous/next controls and indicators. See the new [Carousel section](https://dash-bootstrap-components.opensource.faculty.ai/docs/components/carousel/) of the docs for more information. Here is small preview. And if you make something cool with Carousel please feel free to post it in this thr…

---

<div class="post-metadata">

**Author:** ![keval](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@keval](https://community.plotly.com/u/keval)\
**Post date:** [August 24, 2021, 1:22am UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/3 "2021-08-24T01:22:41Z")

</div>

@AnnMarieW Is there an example you can share that updates the `items` property of the carousel from callback? I didn’t see it in the docs.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 24, 2021, 4:17pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/4 "2021-08-24T16:17:24Z")

</div>

Hi @keval

Currently the `items` prop can’t be updated once the `Carousel` is animating. This may be a bug - I’ll investigate.

The workaround is to return an updated `Carousel` to the `children` prop of an `html.Div`. Here is a mwe:

```auto

import dash
from dash.dependencies import Input, Output
import dash_bootstrap_components as dbc
import dash_html_components as html

app = dash.Dash( __name__ , external_stylesheets=[dbc.themes.DARKLY])

img_style = {"height": "600px", "width": "800px"}
img1 = "https://user-images.githubusercontent.com/72614349/128213790-aaebac53-2e6d-4d20-a41d-647dc0a563d3.jpg"
img2 = "https://user-images.githubusercontent.com/72614349/128213795-e0eff265-2bda-48c7-b89b-0863dd582650.jpg"
img3 = "https://user-images.githubusercontent.com/72614349/128213796-7d660ce6-3e63-4c53-8cf1-dab33ba1b514.jpg"
img4 = "https://user-images.githubusercontent.com/72614349/128245336-faae1bd9-47bb-404c-b8f2-7c94ad981222.jpg"

carousel1 = dbc.Carousel(
    items=[{"key": "1", "src": img1}, {"key": "2", "src": img2}],
    controls=True,
    indicators=True,
    style=img_style,
)

carousel2 = dbc.Carousel(
    items=[{"key": "3", "src": img3}, {"key": "4", "src": img4}],
    controls=True,
    indicators=True,
    style=img_style,
)

app.layout = dbc.Container(
    [
        dbc.Row(
            dbc.Col(
                [
                    dbc.Button("Change slideshow", id="toggle", n_clicks=0),
                    html.Div(id="carousel"),
                ]
            )
        ),
    ],
    fluid=True,
)

@app.callback(
    Output("carousel", "children"), Input("toggle", "n_clicks"),
)
def update_carousel(n):
    if n % 2 > 0:
        return carousel2
    return carousel1

if __name__ == " __main__":
    app.run_server(debug=True)

```

---

<div class="post-metadata">

**Author:** ![keval](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@keval](https://community.plotly.com/u/keval)\
**Post date:** [August 24, 2021, 6:44pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/5 "2021-08-24T18:44:10Z")

</div>

Thanks @AnnMarieW

For context, here’s my use case.

I have a bunch of geo-location, represented by black-dots in the attached GIF. Upon clicking each dot, a modal pop-ups with information about the location. I have added a image carousel (currently static images) to the modal pop-up.

![dash-modal-img (1)](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/e/4/e475bc13c6f9e5b87287fb8203955a154f962239.gif)

I’d like these to be dynamic based on the location.

```auto
dbc.Modal(
                    [
                        dbc.ModalHeader("Lease Information", style={"color":"white"}),
                        dbc.ModalBody(
                            [

                                # Images
                                dbc.Carousel(

                                    id="images",
                                    items=[
                                        {"key": "1", "src": "https://gmaps-images"},
                                        {"key": "2", "src": "https://gmaps-images"},
                                        {"key": "3", "src": "https://gmaps-images"},
                                    ],
                                    controls=True,
                                    indicators=True,
                                ),

                                dbc.Label("Address:", style={"color":"white", "margin-right":"10px"}),
                                dbc.Label("Address:", id="Address"),
                                html.Br(),

                            ]
                        ),
                        dbc.ModalFooter(
                            [
                                dbc.Button("OK", className="mr-1"),
                            ]
                        ),
                    ],
                    id="modal-1",
                ),

```

Say, we have a dictionary of location and associated images

```auto
img_dict = {'location 1': ['link to img1', 'link to img2'], 
                  'location 2': ['link to img3', 'link to img4'] }

```

Now, I’d like to populate the `items` property of the `dbc.Carousel` from the callback, where the input to the callback function is click event and it looks up the values (images) of the location in the `img_dict`

```auto
@application.callback([
                                 Output("modal-1","is_open"),
                                 Output("carousel-1", "items"),
                               ],

                               [
                                Input("map-graph","clickData"),
                                Input("close","n_clicks")
                               ],

                               [
                                State("modal-1", "is_open")
                              ],
                    )
def update_carousel(clickData, modal_close, is_open): 

     # click event for black dots on map-graph
     if clickData:

        res = json.dumps(clickData, indent=2)

        Address = clickData["points"][0]["customdata"]["Address"]
        
        list_of_images = img_dict[Address] 

        return (Address, list_if_images)

```

Is this currently possible to do? The workaround you have will require `dbc.Carousel` object for each point/location on the map which could be into 100s.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 24, 2021, 7:38pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/6 "2021-08-24T19:38:17Z")

</div>

Hi @keval I don’t understand the callback you posted - are there typos? There is no @app.callback and it looks like the return is only if `clickData is None`?

But I think this callback should work per the mwe I posted. Try putting a `html.Div(id="carousel")` in the `dbc.ModalBody(...)` instead of `dbc.Carousel(...)`.  
Then in the callback change  
`Output("carousel-1", "items"),`  
to:  
Output(“carousel”, “children”),

then include in the callback function:

```auto
carousel = dbc.Carousel(
    items=img_dict[Address]
    controls=True,
    indicators=True,    
)
return Address, carousel

```

---

<div class="post-metadata">

**Author:** ![keval](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@keval](https://community.plotly.com/u/keval)\
**Post date:** [August 24, 2021, 7:47pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/7 "2021-08-24T19:47:56Z")

</div>

@AnnMarieW

Sorry about the typos. I was trying to minimize the number of lines of code for simplicity.

The callback should make sense now. Basically, I’d like to pass a list of string of images to `items` property of the `dbc.Carousel`.

I’ll try your recommended approach.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 24, 2021, 7:56pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/8 "2021-08-24T19:56:08Z")

</div>

ok, and be sure that `items` is formatted correctly for the Carousel. It needs to be a list of dicts like the following. It does’t look like `img_dict[Address]` does that.

```auto
items=[
    {"key": "1", "src": "https://gmaps-images"},
    {"key": "2", "src": "https://gmaps-images"},
    {"key": "3", "src": "https://gmaps-images"},
],

```

---

<div class="post-metadata">

**Author:** ![keval](https://avatars.discourse-cdn.com/v4/letter/k/ec9cab/32.png) [@keval](https://community.plotly.com/u/keval)\
**Post date:** [August 25, 2021, 6:47pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/9 "2021-08-25T18:47:33Z")

</div>

@AnnMarieW

More of a general question but related to constructing list of dicts for carousel.

Is there a way to pass data / objects between the callbacks? I have used `dcc.Store` to store the value of `inputs`.

However, in this case, I am constructing a dictionary (for items property of carousel) in a different callback, but would like to reference it / do lookup in a separate callback.

How would you recommending doing something like that? Ideally, would like to not rewrite the code and reuse constructed objects like DataFrames, dictionaries, lists etc.

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 25, 2021, 7:49pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/10 "2021-08-25T19:49:43Z")

</div>

@keval Yes, using `dcc.Store` is the recommended way to share data between callbacks. This should work well. A dictionary can be stored in the `data` property of the `dcc.Store`

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [August 27, 2021, 5:04pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/12 "2021-08-27T17:04:11Z")

</div>

Hi @Reinger and welcome to the Dash community 🙂

Rather than using the `Carousel`, it sounds like you are looking for a before and after image slider. If so check out this post: [Image slider in Dash - #14 by Emil](https://community.plotly.com/t/image-slider-in-dash/51130/14)

You can find this component in @Emil’s [Dash Extensions library](https://github.com/thedirtyfew/dash-extensions/#beforeafter)

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [September 2, 2021, 11:44pm UTC](https://community.plotly.com/t/update-image-carousels-using-callbacks/55482/13 "2021-09-02T23:44:30Z")

</div>

A post was split to a new topic: [Storing a DataFrame in dcc.Store](https://community.plotly.com/t/storing-a-dataframe-in-dcc-store/56230)