Image Carousel in Dash

Dash Python
1

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 (https://www.r-bloggers.com/slickr/) allowing to easily feed a list of image urls and display in carousel.

Thanks

2

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=[
            html.Div(id="image"),
            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="http://placeimg.com/625/225/any")
    elif n % 3 == 2:
        img = html.Img(src="http://placeimg.com/625/225/animals")
    elif n % 3 == 0:
        img = html.Img(src="http://placeimg.com/625/225/arch")
    else:
        img = "None"
    return img

if __name__ == '__main__':
    app.run_server(debug=True)
2 Likes
3

Thank you bcd! That is helpful!

1 Like