Carousel

Div(
   *(Div(
        Img(src=f"https://picsum.photos/300/400?random={num}",
            alt=f"Demo image {num}"),
        cls="carousel-item"
        ) for num in range(5)),
    cls="carousel rounded-box"
)

Div(
    *(Div(
        Img(src=f"https://picsum.photos/300/400?random={num}",
            alt=f"Demo image {num}"),
        cls="carousel-item"
        ) for num in range(5)),
    cls="carousel carousel-center rounded-box"
)

Div(
    *(Div(
    Img(src=f"https://picsum.photos/300/400?random={num}",
        alt=f"Demo image {num}"),
    cls="carousel-item"
    ) for num in range(5)),
    cls="carousel carousel-end rounded-box"
)

Div(
    *(Div(
        Img(src=f"https://picsum.photos/300/400?random={num}",
        alt=f"Demo image {num}"),
        cls="carousel-item w-full"
        ) for num in range(5)),
        cls="carousel rounded-box w-64"
)

Div(
    *(Div(
    Img(src=f"https://picsum.photos/300/400?random={num}",
        alt=f"Demo image {num}"),
    cls="carousel-item w-1/2"
    ) for num in range(5)),
    cls="carousel rounded-box w-96"
)

Div(
    *(Div(
    Img(src=f"https://picsum.photos/300/400?random={num}",
        alt=f"Demo image {num}",
        cls="rounded-box"),
    cls="carousel-item"
    ) for num in range(5)),
    cls="carousel carousel-center bg-neutral rounded-box max-w-md space-x-4 p-4"
)

Div(
    *(Div(
    Img(src=f"https://picsum.photos/300/400?random={num}",
        alt=f"Demo image {num}"),
    cls="carousel-item h-full"
    ) for num in range(5)),
    cls="carousel carousel-vertical rounded-box h-96"
)

Div(
    Div(
        *(Div(
            Img(
                src=f"https://picsum.photos/300/400?random={i+1}",
                alt=f"Item {i+1}",
                cls="w-full h-48 object-cover"
            ),
            id=f"item{i+1}",
            cls="carousel-item w-full"
          ) for i in range(4)),
        cls="carousel w-full"
    ),
    Div(
        *(A(
            str(i+1),
            href=f"#item{i+1}",
            cls="btn btn-xs",
            onclick="event.preventDefault(); document.getElementById('item' + this.innerText).scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'center'});"
          ) for i in range(4)),
        cls="flex justify-center gap-2 py-2"
    )
)

Div(
    Script("""
        function smoothScroll(e) {
            e.preventDefault();
            document.getElementById(e.target.getAttribute('href').substring(1))
                .scrollIntoView({behavior: 'smooth', block: 'nearest', inline: 'center'});
        }
    """),
    *(Div(
        Img(
            src=f"https://picsum.photos/300/400?random={i+1}",
            alt=f"Slide {i+1}",
            cls="w-full h-48 object-cover"
        ),
        Div(
            A("❮", href=f"#slide{4 if i == 0 else i}",
                cls="btn btn-circle",
                onclick="smoothScroll(event)"
            ),
            A("❯", href=f"#slide{1 if i == 3 else i+2}",
                cls="btn btn-circle",
                onclick="smoothScroll(event)"
            ),
            cls="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 justify-between"
        ),
        id=f"slide{i+1}",
        cls="carousel-item relative w-full"
      ) for i in range(4)),
    cls="carousel w-full"
)