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 (
): 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.
Also if you like this project check out my other dash packages I’ve built:
-
full-calendar-component: Pip install full-calendar-component 📅 - #8 by PipInstallPython -
dash-summernote: Pip install dash-summernote 📝 - #2 by AnnMarieW -
dash-swiper: Pip install dash-swiper 🌠 -
dash-emoji-mart: Pip install dash-emoji-mart 😀
Cheers,
Pip
