Images animation through carousel

Anvil Q&A
1

What I’m trying to do:
Hello to everyone. I am so glad to integrate into your community. I’m Dener Francois a Ph.D. Student in Land use and Regional Development from the Laval University of Canada.

What I’ve tried and what’s not working:
I need your help as I’m very new with the Anvil Platform.
I tried to animate pictures by integrating them into a carousel ( images slide show) into an app without success. In fact, I tried the example provided with the Static website templates but I don’t see how to proceed to get this worked on the home page.

Thanks for your help.
Sincerely
Dener Francois

Code Sample:

# this is a formatted code snippet.
# paste your code between ```

Clone link:
share a copy of your app

2

Hello and welcome.

I’m sure everything you are hoping to do is possible with Anvil. Unfortunately, your question and title are not detailed enough for anyone to help.

Please follow these guidelines and reform your question accordingly and the community will be sure to help.

3

Here’s a little carousel example. Perhaps it’s helpful as a basis to begin forming some more specific questions:

https://anvil.works/build#clone:XJWQNCSPH7PBXE5S=6E2SLTLPKOWBCWTDFZ3DFJ6O

2 Likes
4

Nickantonacio, thanks a lot for this basic example. In fact it is really a good point to start exploring the concept. But now, it would be great if images could be moved automatically on form load event.

Best,
Dener.

Obtenir Outlook pour Android

5

I’m not exactly sure how you imagine ‘could be moved automatically’ to look or operate. One potential idea would be to set a timer to change the image widget source:

https://anvil.works/build#clone:QK5JN4VRBZ5QDCZQ=X6CT7HQXSHM5Q62PLYPUFCJB

2 Likes
6

If you mean to display a different image every time a form loads, you can do something like this:

https://anvil.works/build#clone:EYTDZPIOKGKOVZ7E=GIZ4WJW2LBOAPQF4K3GLEN7O

(you can store an image index for each user, with users service)

2 Likes
7

I know it’s an old post. But how could I modify this example so that the image selected in the carousel is highlighted? I’m guessing it’s a CSS related answer? Thanks for reading.

8

I added a few lines to https://carouselpanel.anvil.app so that a border is added around the selected thumbnail, and removed when a different thumbnail is selected:

  def __init__(self, **properties):
    self.init_components(**properties)
    self.previously_selected = None
    self.flow_panel_1.role='flow-scroll-x'
    for row in app_tables.images.search():
      picture=Image(source=row['image'], height=60, width=80)
      picture.set_event_handler('mouse_enter', self.click)
      name=Label(text=row['caption'], align='center')
      lin_panel=LinearPanel()
      lin_panel.add_component(picture)
      lin_panel.add_component(name)
      self.flow_panel_1.add_component(lin_panel)
 
  def click(self, **event_args):
    if self.previously_selected:
      self.previously_selected.border = None
    self.image_1.source=event_args['sender'].source
    self.previously_selected = event_args['sender']
    event_args['sender'].border = 'dotted 2px #007BFF'
2 Likes
9

Fabulous!! Thank you very much for that solution. I would never have figured that out. I was trying to apply CSS to the image but it was more a guess than anything. Most of my experience is in embedded programming and directly interfacing to hardware. CSS is a bit of a dark art to me. I feel I will need to understand it more to get the most out of Anvil. Thanks again for your time.