Pip install dash-swiper 🌠

Dash Python
,
6

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
3 Likes