S
Solara11mo ago
Townsaver

Is there a way to create a slideshow of images that respond to left and right arrows?

It would be great to be able to iterate through a list of images using left and right arrows. Matplotlib interactive features only allow you to use the arrows for view history of a single figure. Back and Forward ipywidgets work but its bit inconvient. What would be ideal is using keyboard shortcuts.
2 Replies
iisakkirotko
iisakkirotko11mo ago
Hi! Maybe you can make use of a Vuetify Carousel through something like:
import solara
from solara.alias import rv


index = solara.reactive(0)


@solara.component
def Page():
with rv.Carousel(v_model=index.value):
with rv.CarouselItem():
solara.Div(style="height: 100px; width: 100px; background-color: red;")
with rv.CarouselItem():
solara.Div(style="height: 100px; width: 100px; background-color: green;")
with rv.CarouselItem():
solara.Div(style="height: 100px; width: 100px; background-color: blue;")

def click():
index.set(index.value + 1)

solara.Button("Next", on_click=click)
import solara
from solara.alias import rv


index = solara.reactive(0)


@solara.component
def Page():
with rv.Carousel(v_model=index.value):
with rv.CarouselItem():
solara.Div(style="height: 100px; width: 100px; background-color: red;")
with rv.CarouselItem():
solara.Div(style="height: 100px; width: 100px; background-color: green;")
with rv.CarouselItem():
solara.Div(style="height: 100px; width: 100px; background-color: blue;")

def click():
index.set(index.value + 1)

solara.Button("Next", on_click=click)
Although the Vuetify carousel does not support navigating using the keyboard, you could put in listeners for that by hand.
Vuetify — A Material Design Framework for Vue.js
Vuetify is a Material Design component framework for Vue.js. It aims to provide all the tools necessary to create beautiful content rich applications.
Townsaver
TownsaverOP11mo ago
i will try it out
Want results from more Discord servers?
Add your server