Developer Console enables Interaction

Anvil Q&A
1

What I’m trying to do:
I am attempting to create an anvil wrapper for SwiperJS . Everything basic seems to go well, however I’m having issues with the card effect.

Here is the working effect:

swiperjs_card

What I’ve tried and what’s not working:
When I try to initiate a Swiper Object with the card effect, it will not let me interact with the swiper until I open the developer console in browser. It almost looks like its disabled on initiation. I tried in both windows- chrome,edge & mac - safari.

NOTE: Its not directly a resize window action, BUT the same behavior occurs when minimizing the run window in the IDE environment.

Here is a gif of the issue:

swiperjs_issue

Once everything is clean and running correctly, I’ll plan on making a show and tell if all the cool stuff swiper enables.

Clone link:
share a copy of your app

1 Like
2

looks like you need to do something in the swiper component’s show event

this works well

  def form_show(self, **event_args):
    """This method is called when the form is shown on the page"""
    self.swiper.update()

from swiper’s api docs on the update method:

Swiper API
You should call it after you add/remove slides manually, or after you hide/show it, or do any custom DOM modifications with Swiper

it’s quite usual for a javascript library to require elements to be on screen before initialisation.
so that’s what I was looking for when browsing their api docs

2 Likes