Black Lives Matter. Please consider donating to Black Girls Code today.

Image Carousel in Dash

Hi, is there a way of showing multiple images in a carousel format in Dash? When I previously used shiny, there’s a package call slickR ( allowing to easily feed a list of image urls and display in carousel.


Hey @Zeno

There are probably numerous ways to do this such as using sliders or other controls with callabcks. You can even create slideshow-like images:

import dash
import dash_core_components as dcc
import dash_html_components as html
from dash.dependencies import Input, Output
import plotly.graph_objs as go

app = dash.Dash()
server = app.server

app.layout = html.Div([

    html.Section(id="slideshow", children=[
        html.Div(id="slideshow-container", children=[
            dcc.Interval(id='interval', interval=3000)


@app.callback(Output('image', 'children'),
              [Input('interval', 'n_intervals')])
def display_image(n):
    if n == None or n % 3 == 1:
        img = html.Img(src="")
    elif n % 3 == 2:
        img = html.Img(src="")
    elif n % 3 == 0:
        img = html.Img(src="")
        img = "None"
    return img

if __name__ == '__main__':


Thank you bcd! That is helpful!

1 Like