Slideshow component?

Anvil Q&A
#1

It seems like there should be a built in image slider/slideshow component; has someone already made this? If not, my first pass would be to do so via custom JavaScript.

#2

I would explore https://getbootstrap.com/docs/3.4/javascript/#carousel

here’s a quick demo using the example from the above link
https://anvil.works/build#clone:H7UAHYX3X7RXOWHQ=RTGKI5RGVSBMT5DH7H5TQ2TJ

just set the items

    self.carousel.items = [
      {'source': '_/theme/image1.png', 'alt': 'image 1', 'caption': 'Image 1'},
      {'source': '_/theme/image2.png', 'alt': 'image 2', 'caption': 'Image 2'}
    ]

Linked documentation:
https://anvil.works/docs/client/custom-components
https://anvil.works/docs/client/javascript

2 Likes
#3

This works beautifully for images accessible via a URL, but I can’t get it to display images from a Data Table (represented as LazyMedia); is there a trick to doing so?

#4

After more tinkering, I discovered how to make this work; source should be set to row["image"].url as opposed to the image itself.

3 Likes