carousel

Carousel shows images or content in a scrollable area.

Base Carousel

The base carousel components:

carousel = SingleValueFactory("carousel", "Carousel container") # Carousel container
carousel_item = SingleValueFactory("carousel-item", "Carousel item") # Carousel item

Carousel Snap Alignment

Carousel snap alignment modifiers:

carousel_snap = SimpleFactory(
    {
        "start": "carousel-start",
        "center": "carousel-center",
        "end": "carousel-end"
    },
    "Carousel snap alignment options (start is default)"
) # Carousel snap alignment

Carousel Direction

Carousel direction modifiers:

carousel_direction = SimpleFactory(
    {
        "horizontal": "carousel-horizontal",
        "vertical": "carousel-vertical"
    },
    "Carousel direction layout (horizontal is default)"
) # Carousel direction

Carousel Test Examples

---

source

test_carousel_basic_examples

 test_carousel_basic_examples ()

Test basic carousel utilities.

def test_carousel_basic_examples():
    """Test basic carousel utilities."""
    # Basic components
    assert str(carousel) == "carousel"
    assert str(carousel_item) == "carousel-item"
    
    # With modifiers
    assert str(carousel.hover) == "hover:carousel"
    assert str(carousel_item.md) == "md:carousel-item"
    assert str(carousel.dark) == "dark:carousel"

# Run the tests
test_carousel_basic_examples()

---

source

test_carousel_modifiers_examples

 test_carousel_modifiers_examples ()

Test carousel modifier utilities.

def test_carousel_modifiers_examples():
    """Test carousel modifier utilities."""
    # Snap alignment
    assert str(carousel_snap.start) == "carousel-start"
    assert str(carousel_snap.center) == "carousel-center"
    assert str(carousel_snap.end) == "carousel-end"
    
    # Direction
    assert str(carousel_direction.horizontal) == "carousel-horizontal"
    assert str(carousel_direction.vertical) == "carousel-vertical"
    
    # With responsive modifiers
    assert str(carousel_snap.center.hover) == "hover:carousel-center"
    assert str(carousel_direction.vertical.md) == "md:carousel-vertical"

# Run the tests
test_carousel_modifiers_examples()

---

source

test_carousel_snap_alignment_fasthtml_examples

 test_carousel_snap_alignment_fasthtml_examples ()

Test carousel snap alignment examples from daisyUI v5 documentation.

def test_carousel_snap_alignment_fasthtml_examples():
    """Test carousel snap alignment examples from daisyUI v5 documentation."""
    from fasthtml.common import Div, Img
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_daisyui.utilities.border_radius import border_radius
    
    # Snap to start (default)
    snap_start_carousel = Div(
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp",
                alt="Burger"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp",
                alt="Burger"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp",
                alt="Burger"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp",
                alt="Burger"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp",
                alt="Burger"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp",
                alt="Burger"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp",
                alt="Burger"
            ),
            cls=str(carousel_item)
        ),
        cls=combine_classes(carousel, border_radius.box)
    )
    assert "carousel" in snap_start_carousel.attrs['class']
    assert "rounded-box" in snap_start_carousel.attrs['class']
    assert len(snap_start_carousel.children) == 7
    for child in snap_start_carousel.children:
        assert "carousel-item" in child.attrs['class']
        assert child.children[0].tag == "img"
        assert child.children[0].attrs['alt'] == "Burger"
    
    # Snap to center
    snap_center_carousel = Div(
        Div(
            Img(src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp", alt="Pizza"),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp",
                alt="Pizza"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp",
                alt="Pizza"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp",
                alt="Pizza"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp", alt="Pizza"),
            cls=str(carousel_item)
        ),
        Div(
            Img(src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp", alt="Pizza"),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp",
                alt="Pizza"
            ),
            cls=str(carousel_item)
        ),
        cls=combine_classes(carousel, carousel_snap.center, border_radius.box)
    )
    assert "carousel" in snap_center_carousel.attrs['class']
    assert "carousel-center" in snap_center_carousel.attrs['class']
    assert "rounded-box" in snap_center_carousel.attrs['class']
    for child in snap_center_carousel.children:
        assert child.children[0].attrs['alt'] == "Pizza"
    
    # Snap to end
    snap_end_carousel = Div(
        Div(
            Img(src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp", alt="Drink"),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp",
                alt="Drink"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp",
                alt="Drink"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp",
                alt="Drink"
            ),
            cls=str(carousel_item)
        ),
        Div(
            Img(src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp", alt="Drink"),
            cls=str(carousel_item)
        ),
        Div(
            Img(src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp", alt="Drink"),
            cls=str(carousel_item)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp",
                alt="Drink"
            ),
            cls=str(carousel_item)
        ),
        cls=combine_classes(carousel, carousel_snap.end, border_radius.box)
    )
    assert "carousel" in snap_end_carousel.attrs['class']
    assert "carousel-end" in snap_end_carousel.attrs['class']
    assert "rounded-box" in snap_end_carousel.attrs['class']
    for child in snap_end_carousel.children:
        assert child.children[0].attrs['alt'] == "Drink"
    
    # Return all examples in a Div
    return Div(
        snap_start_carousel,
        snap_center_carousel,
        snap_end_carousel
    )

# Run the tests
test_carousel_snap_alignment_fasthtml_examples()

<div>
  <div class="carousel rounded-box">
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" alt="Burger">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" alt="Burger">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" alt="Burger">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp" alt="Burger">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" alt="Burger">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" alt="Burger">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp" alt="Burger">    </div>
  </div>
  <div class="carousel carousel-center rounded-box">
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" alt="Pizza">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" alt="Pizza">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" alt="Pizza">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp" alt="Pizza">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" alt="Pizza">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" alt="Pizza">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp" alt="Pizza">    </div>
  </div>
  <div class="carousel carousel-end rounded-box">
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" alt="Drink">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" alt="Drink">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" alt="Drink">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp" alt="Drink">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" alt="Drink">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" alt="Drink">    </div>
    <div class="carousel-item">
<img src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp" alt="Drink">    </div>
  </div>
</div>

test_func = test_carousel_snap_alignment_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_carousel_layout_fasthtml_variations

 test_carousel_layout_fasthtml_variations ()

Test carousel layout variations from daisyUI v5 documentation.

test_func = test_carousel_layout_fasthtml_variations
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

---

source

test_carousel_navigation_fasthtml_examples

 test_carousel_navigation_fasthtml_examples ()

Test carousel with navigation examples from daisyUI v5 documentation.

def test_carousel_navigation_fasthtml_examples():
    """Test carousel with navigation examples from daisyUI v5 documentation."""
    from fasthtml.common import Div, Img, A
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import justify, gap, flex_display
    from cjm_fasthtml_tailwind.utilities.spacing import p
    from cjm_fasthtml_tailwind.utilities.layout import display_tw, position, left, right, top
    from cjm_fasthtml_tailwind.utilities.transforms import translate, transform
    from cjm_fasthtml_daisyui.components.actions.button import btn, btn_sizes, btn_modifiers
    
    # Carousel with indicator buttons
    carousel_with_indicators = Div(
        Div(
            Div(
                Img(
                    src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp",
                    cls=str(w.full)
                ),
                id="item1",
                cls=combine_classes(carousel_item, w.full)
            ),
            Div(
                Img(
                    src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp",
                    cls=str(w.full)
                ),
                id="item2",
                cls=combine_classes(carousel_item, w.full)
            ),
            Div(
                Img(
                    src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp",
                    cls=str(w.full)
                ),
                id="item3",
                cls=combine_classes(carousel_item, w.full)
            ),
            Div(
                Img(
                    src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp",
                    cls=str(w.full)
                ),
                id="item4",
                cls=combine_classes(carousel_item, w.full)
            ),
            cls=combine_classes(carousel, w.full)
        ),
        Div(
            A("1", href="#item1", cls=combine_classes(btn, btn_sizes.xs)),
            A("2", href="#item2", cls=combine_classes(btn, btn_sizes.xs)),
            A("3", href="#item3", cls=combine_classes(btn, btn_sizes.xs)),
            A("4", href="#item4", cls=combine_classes(btn, btn_sizes.xs)),
            cls=combine_classes(flex_display, w.full, justify.center, gap._2, p.y._2)
        )
    )
    
    # Verify carousel structure
    carousel_div = carousel_with_indicators.children[0]
    assert "carousel" in carousel_div.attrs['class']
    assert "w-full" in carousel_div.attrs['class']
    assert len(carousel_div.children) == 4
    
    # Verify carousel items
    for i, child in enumerate(carousel_div.children):
        assert "carousel-item" in child.attrs['class']
        assert "w-full" in child.attrs['class']
        assert child.attrs['id'] == f"item{i+1}"
        assert child.children[0].tag == "img"
        assert "w-full" in child.children[0].attrs['class']
    
    # Verify indicator buttons
    indicators_div = carousel_with_indicators.children[1]
    assert "flex" in indicators_div.attrs['class']
    assert "w-full" in indicators_div.attrs['class']
    assert "justify-center" in indicators_div.attrs['class']
    assert "gap-2" in indicators_div.attrs['class']
    assert "py-2" in indicators_div.attrs['class']
    
    for i, indicator in enumerate(indicators_div.children):
        assert indicator.tag == "a"
        assert indicator.attrs['href'] == f"#item{i+1}"
        assert "btn" in indicator.attrs['class']
        assert "btn-xs" in indicator.attrs['class']
        assert indicator.children[0] == str(i+1)
    
    # Carousel with next/prev buttons
    carousel_with_nav = Div(
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp",
                cls=str(w.full)
            ),
            Div(
                A("❮", href="#slide4", cls=combine_classes(btn, btn_modifiers.circle)),
                A("❯", href="#slide2", cls=combine_classes(btn, btn_modifiers.circle)),
                cls=combine_classes(
                    position.absolute,
                    left._5,
                    right._5,
                    top("1/2"),
                    flex_display,
                    translate.y("1/2", negative=True),
                    justify.between
                )
            ),
            id="slide1",
            cls=combine_classes(carousel_item, position.relative, w.full)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp",
                cls=str(w.full)
            ),
            Div(
                A("❮", href="#slide1", cls=combine_classes(btn, btn_modifiers.circle)),
                A("❯", href="#slide3", cls=combine_classes(btn, btn_modifiers.circle)),
                cls=combine_classes(
                    position.absolute,
                    left._5,
                    right._5,
                    top("1/2"),
                    flex_display,
                    translate.y("1/2", negative=True),
                    justify.between
                )
            ),
            id="slide2",
            cls=combine_classes(carousel_item, position.relative, w.full)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp",
                cls=str(w.full)
            ),
            Div(
                A("❮", href="#slide2", cls=combine_classes(btn, btn_modifiers.circle)),
                A("❯", href="#slide4", cls=combine_classes(btn, btn_modifiers.circle)),
                cls=combine_classes(
                    position.absolute,
                    left._5,
                    right._5,
                    top("1/2"),
                    flex_display,
                    translate.y("1/2", negative=True),
                    justify.between
                )
            ),
            id="slide3",
            cls=combine_classes(carousel_item, position.relative, w.full)
        ),
        Div(
            Img(
                src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp",
                cls=str(w.full)
            ),
            Div(
                A("❮", href="#slide3", cls=combine_classes(btn, btn_modifiers.circle)),
                A("❯", href="#slide1", cls=combine_classes(btn, btn_modifiers.circle)),
                cls=combine_classes(
                    position.absolute,
                    left._5,
                    right._5,
                    top("1/2"),
                    flex_display,
                    translate.y("1/2", negative=True),
                    justify.between
                )
            ),
            id="slide4",
            cls=combine_classes(carousel_item, position.relative, w.full)
        ),
        cls=combine_classes(carousel, w.full)
    )
    
    # Verify carousel structure
    assert "carousel" in carousel_with_nav.attrs['class']
    assert "w-full" in carousel_with_nav.attrs['class']
    assert len(carousel_with_nav.children) == 4
    
    # Verify each slide
    for i, slide in enumerate(carousel_with_nav.children):
        slide_num = i + 1
        assert slide.attrs['id'] == f"slide{slide_num}"
        assert "carousel-item" in slide.attrs['class']
        assert "relative" in slide.attrs['class']
        assert "w-full" in slide.attrs['class']
        
        # Verify image
        assert slide.children[0].tag == "img"
        assert "w-full" in slide.children[0].attrs['class']
        
        # Verify navigation controls
        nav_div = slide.children[1]
        assert "absolute" in nav_div.attrs['class']
        assert "left-5" in nav_div.attrs['class']
        assert "right-5" in nav_div.attrs['class']
        assert "top-1/2" in nav_div.attrs['class']
        assert "flex" in nav_div.attrs['class']
        assert "-translate-y-1/2" in nav_div.attrs['class']
        assert "justify-between" in nav_div.attrs['class']
        
        # Verify prev/next buttons
        prev_btn = nav_div.children[0]
        next_btn = nav_div.children[1]
        assert prev_btn.tag == "a"
        assert next_btn.tag == "a"
        assert "btn" in prev_btn.attrs['class']
        assert "btn-circle" in prev_btn.attrs['class']
        assert "btn" in next_btn.attrs['class']
        assert "btn-circle" in next_btn.attrs['class']
        assert prev_btn.children[0] == "❮"
        assert next_btn.children[0] == "❯"
        
        # Verify href links form a circular navigation
        if slide_num == 1:
            assert prev_btn.attrs['href'] == "#slide4"
            assert next_btn.attrs['href'] == "#slide2"
        elif slide_num == 2:
            assert prev_btn.attrs['href'] == "#slide1"
            assert next_btn.attrs['href'] == "#slide3"
        elif slide_num == 3:
            assert prev_btn.attrs['href'] == "#slide2"
            assert next_btn.attrs['href'] == "#slide4"
        elif slide_num == 4:
            assert prev_btn.attrs['href'] == "#slide3"
            assert next_btn.attrs['href'] == "#slide1"
    
    # Return all examples in a Div
    return Div(
        carousel_with_indicators,
        carousel_with_nav
    )

# Run the tests
test_carousel_navigation_fasthtml_examples()

<div>
  <div>
    <div class="carousel w-full">
      <div id="item1" class="carousel-item w-full">
<img src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp" class="w-full">      </div>
      <div id="item2" class="carousel-item w-full">
<img src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp" class="w-full">      </div>
      <div id="item3" class="carousel-item w-full">
<img src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp" class="w-full">      </div>
      <div id="item4" class="carousel-item w-full">
<img src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp" class="w-full">      </div>
    </div>
    <div class="flex w-full justify-center gap-2 py-2">
<a href="#item1" class="btn btn-xs">1</a><a href="#item2" class="btn btn-xs">2</a><a href="#item3" class="btn btn-xs">3</a><a href="#item4" class="btn btn-xs">4</a>    </div>
  </div>
  <div class="carousel w-full">
    <div id="slide1" class="carousel-item relative w-full">
<img src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp" class="w-full">      <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 justify-between">
<a href="#slide4" class="btn btn-circle">❮</a><a href="#slide2" class="btn btn-circle">❯</a>      </div>
    </div>
    <div id="slide2" class="carousel-item relative w-full">
<img src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp" class="w-full">      <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 justify-between">
<a href="#slide1" class="btn btn-circle">❮</a><a href="#slide3" class="btn btn-circle">❯</a>      </div>
    </div>
    <div id="slide3" class="carousel-item relative w-full">
<img src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp" class="w-full">      <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 justify-between">
<a href="#slide2" class="btn btn-circle">❮</a><a href="#slide4" class="btn btn-circle">❯</a>      </div>
    </div>
    <div id="slide4" class="carousel-item relative w-full">
<img src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp" class="w-full">      <div class="absolute left-5 right-5 top-1/2 flex -translate-y-1/2 justify-between">
<a href="#slide3" class="btn btn-circle">❮</a><a href="#slide1" class="btn btn-circle">❯</a>      </div>
    </div>
  </div>
</div>

test_func = test_carousel_navigation_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()