AnvilSwiperJs : Anvil Wrapper for SwiperJS Library

Show and Tell
1

I was trying to figure out a way to make the “swipe to delete” functionality found in most mobile apps and stumbled upon this great library. SwiperJS has a beautiful set of swiping demos available.

I made this wrapper to use two of the demos. I will probably be adding more as I need them but I’ll take request. I also will make this available on GitHub, timing is TBD.

Hope the community enjoys!

shoutout to @stucork for helping with an issue.

Demo
swiper

code

from ._anvil_designer import AnvilSwiperCardsExampleTemplate
from anvil import *
from anvil import js

class AnvilSwiperCardsExample(AnvilSwiperCardsExampleTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Any code you write here will run before the form opens.
    texts = ["Hello","World","Goodbye"]
    colors = ["Red","Yellow","Blue"]
    labels = [Label(text=texts[x],background=colors[x],align="center") for x in range(0,3)]

    self.swiper.args = {
      'effect':'cards',
      'pagination':True,
      'loop':True,
    }
    self.swiper.height = "300px"
    self.swiper.height = "400px"
    self.swiper.slides = labels

Clone

16 Likes
2

This is great library. Thanks for the wrapper, @anthonys!

Has anyone figured out how to use it with more advanced forms?

I tried with forms containing plot and calendar, but they do not display. There is also an issue with labels displayed correctly on swiper slider.

Here is a clone of the original clone where I have added forms that do not display:

1 Like
3

Thank you!

I took a look at your clone.

For some reason, the plot isn’t rendering and I tried throwing everything at it.

The calendar was a simple, “manually call the form_show()” method when the panel was active. I also added the “autoHeight” to the swiper arguements, so it would fit and changed some of the html to that form.

class AnvilSwiperSliderExample(AnvilSwiperSliderExampleTemplate):
  def __init__(self, **properties):
    # Set Form properties and Data Bindings.
    self.init_components(**properties)

    # Any code you write here will run before the form opens.

    labels = []
    labels.append(Form1())
    labels.append(Form4())
    labels.append(Form3())
    
    self.swiper.args = {
       'navigation':{
         "nextEl": ".swiper-button-next",
         "prevEl": ".swiper-button-prev",
     },
      'autoHeight':True
    }
    
    #self.swiper.height = "800px"
    self.swiper.slides = labels
    self.swiper.swiper.on('realIndexChange',self.handle_change)

  def handle_change(self,*args,**event_args):
    self.swiper.slides[self.swiper.swiper.activeIndex].form_show()

Do you have a link to the documentation for FullCalendar? its so clean! Edit: Found it! Initialize with Script Tags - Docs | FullCalendar

1 Like
4

Thanks for helping me with the calendar, @anthonys!

The plot is tricky. I unsuccessfully tried a workaround to export the plot as an image.

Here is what I’ve found out so far about adding components to the swiper:

  • anvil.Plot does not work
  • Image with source = anvil.URLMedia does not work (from my_plot.to_image())
  • Image with source set to an asset file or base64 string works

Separate Plotly issue: my_plot.to_image() does not work, it returns an image of empty axis without any data plotted.

I suppose the problem is that anvil.Plot and anvil.URLMedia don’t play well together with javascript or the DOM?
Does anybody have an idea about how to make it work?

1 Like