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

13 Likes