How? Slider to control visibility of layout images


I am trying to build a slider to display a series of images. I will first show a working script for displaying images without a slider. Then I will present my attempt on getting the Plotly slider to work (unsuccessful). I believe the reason is apparent: The tutorial that I have been referring to, โ€œSliders | Python | Plotlyโ€, only works on the traces or objects in, whereas I am trying to modify the visibilities of objects in fig._layout_obj.images.


import plotly.graph_objects as go

img_sources = [
width, height = 600, 400

fig = go.Figure()
for src in img_sources:
        xref='x', yref='y',
        x=0, y=height,
        sizex=width, sizey=height,
fig._layout_obj.images[0]['visible'] = True

    paper_bgcolor='rgba(255, 255, 255, 0)', plot_bgcolor='rgba(255, 255, 255, 0)',
    width=width, height=height,
    margin=dict(l=0, r=0, b=0, t=0, pad=0),
    xaxis=dict(range=[0, width], showgrid=False, visible=False),
    yaxis=dict(scaleanchor='x', range=[0, height], showgrid=False, visible=False),
""">>> Only the first image is displayed."""

But things do not work when I try to add the slider to switch between the two images. The slider appears, but it does not modify the visibilities of the images.

"""Not working"""
steps = []
for i, _ in enumerate(img_sources):
    step = dict(method='update',
                args=[dict(visible=[False] * len(img_sources))],
    step['args'][0]['visible'][i] = True
sliders = [dict(
    currentvalue=dict(prefix='Image No.: '),

""">>> The second image cannot be displayed."""

Instead of controlling loading in all the images and controlling their visibility using the slider, youโ€™ll have an easier time controlling the image to load based on the slider change instead.