Py.Cafe

maartenbreddels/

dash-swiper-demo

Image Carousel Demo using Dash Swiper

DocsPricing
  • assets/
  • app.py
  • requirements.txt
app.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
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=1,
            # 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")
requirements.txt
1
2
dash
dash_swiper