Pip install dash-swiper 🌠

F96E3AC2-8BC6-4C27-85C5-8689DE6ADE4E-ezgif.com-optimize (2)
Downloads
This one new package I created is difficult to showcase in the forums and an even more difficult one to build but here it is: pip install dash-swiper built on swiperjs, this package is in its infancy at a 0.0.1 release with many more improvements on the radar.

Specifically I have high hopes of porting over all plugins relating to: https://swiperjs.com/plugins
Which might I add includes 17 specific new professionally designed sliders witch will be a heavy task to take on. At the moment we are 1/17 completed.

This initial offering is the Shaders Slider offering a range of shaders including:

  • random
  • dots
  • flyeye
  • morph-x
  • morph-y
  • page-curl
  • peel-x
  • peel-y
  • polygons-fall
  • polygons-morph
  • polygons-wind
  • pixelize
  • ripple
  • shutters
  • slices
  • squares
  • stretch
  • wave-x
  • wind

Although this package is functional it isn’t perfect as some endpoints offered in Shaders Slider that are not available for dash I did offer as much as I could within the time I had to spare in this development crunch.

  • Features include, pause transitions upon mouse entering the slider body
  • Clickable Title passed from slides
  • Adjustable style dependent on parent component for example Div(style={β€˜height’:β€˜20vh’}, DashSwiper())
  • horizontal and vertical shaders
  • ability to set speed

A base example can be found here:

import dash_swiper
from dash import *

app = Dash(
    __name__,
    assets_folder="assets",
)

app.layout = html.Div(
    [
        dash_swiper.DashSwiper(
            id="my-swiper",
            className="swiper-slide",
            swiperOptions={
                "direction": "horizontal",
                "loop": True,
                "pauseOnMouseEnter": True,
                "autoplay": False,  # Add this line to turn off autoplay
                "waitForTransition": True,
                # Add more Swiper options here
            },
            # speed=0,
            # loop=True,
            slides=[
                {
                    "src": get_asset_url("images/01.jpg"),
                    "alt": "Image 1",
                    "title": "Spider-Man: No Way Home",
                    "link": "https://www.example1.com",
                },
                {
                    "src": get_asset_url("images/02.jpg"),
                    "alt": "Image 2",
                    "title": "Free Guy",
                    "link": "https://www.example2.com",
                },
                {
                    "src": get_asset_url("images/03.jpg"),
                    "alt": "Image 3",
                    "title": "The Nice Guys",
                    "link": "https://www.example3.com",
                },
                {
                    "src": get_asset_url("images/04.jpg"),
                    "alt": "Image 4",
                    "title": "Cage",
                    "link": "https://www.example4.com",
                },
                {
                    "src": get_asset_url("images/05.jpg"),
                    "alt": "Image 5",
                    "title": "avatar",
                    "link": "https://www.example5.com",
                },
            ],
            shader="random",  # Add the shader effect here

        ),
    ],
    style={"width": "100%", "height": "100vh"},
)

if __name__ == "__main__":
    app.run_server(debug=True, port="3053")

Works with get_asset_url() and fairly easy to setup for the novice I need a fancy swiper type.

Interested in looking through the repo you can find it here (:star:): GitHub - pip-install-python/dash_swiper: swiperjs for dash

Pypi: dash-swiper Β· PyPI

Follow me on github, mark send alerts for this forum more updates to be released soon.
Pip Install Python GitHub stats
Also if you like this project check out my other dash packages I’ve built:

  1. full-calendar-component: Pip install full-calendar-component πŸ“… - #8 by PipInstallPython

  2. dash-summernote: Pip install dash-summernote πŸ“ - #2 by AnnMarieW

  3. dash-swiper: Pip install dash-swiper 🌠

  4. dash-emoji-mart: Pip install dash-emoji-mart πŸ˜€

Cheers,
Pip

3 Likes

you’re on fire @PipInstallPython with all these new packages built on top of Dash :fire:

Thank you :pray:

2 Likes

sir, hello!
do you know how to use this without images but only text or A Tag ?

I dont believe its possible, it was designed for pictures.

1 Like

thanks for your comment

i’m so touched

Added a new carousel component within this library introducing from dash_swiper import DashCarousel, make sure to upgrade to pip install dash-swiper==0.0.3

How to Setup:

from dash_swiper import DashCarousel

html.Div(DashCarousel(
            id="my-carousel",
            className="custom-carousel",
            slides=[
                {
                    "src": 'https://pannellum.org/images/from-tree.jpg',
                    "alt": "Spider Man",
                    "title": "Spider-Man: No Way Home",
                    "description": "A thrilling superhero adventure.",
                },
                {
                    "src": 'https://pannellum.org/images/from-tree.jpg',
                    "alt": "Free Guy",
                    "title": "Free Guy",
                    "description": "A comedy about a video game NPC.",
                },
                {
                    "src": 'https://pannellum.org/images/from-tree.jpg',
                    "alt": "Nice Guys Finish Last",
                    "title": "The Nice Guys",
                    "description": "A neo-noir comedy thriller.",
                },
                {
                    "src": 'https://pannellum.org/images/from-tree.jpg',
                    "alt": "Cage",
                    "title": "Cage",
                    "description": "An intense action-packed movie.",
                },
                {
                    "src": 'https://pannellum.org/images/from-tree.jpg',
                    "alt": "Avatar",
                    "title": "Avatar",
                    "description": "An epic science fiction adventure.",
                },
            ],
            carouselEffect={
                "opacityStep": 0.33,
                "scaleStep": 0.2,
                "sideSlides": 1,
            },
            autoplayEnabled=True,  # Set this to False to disable autoplay
            autoplay={
                "delay": 3000,
                "disableOnInteraction": True,
            },
            loop=True,
            grabCursor=True,
            navigation=False,
            pagination=False,
            slidesPerView=2,
            style={"width": "100%", "height": "100%"},  # Set to 100% to fill the wrapper
        ), style={"width": "80%", "height": "200px", "margin": "0 auto"}),  # Wrapper div style
2 Likes

Looks really slick @PipInstallPython :ok_hand:

1 Like