Check out BugBytes overview of labb
UI

Search

Search features are coming soon!

Carousel

<c-lb.carousel /> Markdown

Carousel component for Django: build image sliders and content carousels. Built with django-cotton, Tailwind CSS, and daisyUI 5. Zero JavaScript by default.

Carousel renders a horizontally scrollable sequence of slides using CSS scroll snapping — no JavaScript needed. Each c-lb.carousel.item is a slide, and navigation uses anchor links targeting each item's ID.

Slide 1
Slide 2
Slide 3
Slide 4 
<c-lb.carousel class="w-full">
    <c-lb.carousel.item class="">
        <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" class="" alt="Slide 1" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="">
        <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" class="" alt="Slide 2" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="">
        <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" class="" alt="Slide 3" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="">
        <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" class="" alt="Slide 4" />
    </c-lb.carousel.item>
</c-lb.carousel>

Snap to Center

Slide 1
Slide 2
Slide 3
Slide 4 
<c-lb.carousel snap="center" class="rounded-box w-full">
    <c-lb.carousel.item class="">
        <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" class="" alt="Slide 1" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="">
        <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" class="" alt="Slide 2" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="">
        <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" class="" alt="Slide 3" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="">
        <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" class="" alt="Slide 4" />
    </c-lb.carousel.item>
</c-lb.carousel>

Snap to End

Slide 1
Slide 2
Slide 3
Slide 4 
<c-lb.carousel snap="end" class="rounded-box w-full">
    <c-lb.carousel.item class="w-full">
        <img src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp" class="w-full" alt="Slide 1" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="w-full">
        <img src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp" class="w-full" alt="Slide 2" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="w-full">
        <img src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp" class="w-full" alt="Slide 3" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="w-full">
        <img src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp" class="w-full" alt="Slide 4" />
    </c-lb.carousel.item>
</c-lb.carousel>

<c-lb.carousel direction="vertical" class="rounded-box h-96">
    <c-lb.carousel.item class="h-full">
        <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="h-full">
        <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="h-full">
        <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="h-full">
        <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" />
    </c-lb.carousel.item>
</c-lb.carousel>

Half Width Items

Slide 1
Slide 2
Slide 3
Slide 4
Slide 5
Slide 6
Slide 7 
<c-lb.carousel class="rounded-box w-96">
    <c-lb.carousel.item class="w-1/2">
        <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" class="w-full" alt="Slide 1" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="w-1/2">
        <img src="https://img.daisyui.com/images/stock/photo-1565098772267-60af42b81ef2.webp" class="w-full" alt="Slide 2" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="w-1/2">
        <img src="https://img.daisyui.com/images/stock/photo-1572635148818-ef6fd45eb394.webp" class="w-full" alt="Slide 3" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="w-1/2">
        <img src="https://img.daisyui.com/images/stock/photo-1494253109108-2e30c049369b.webp" class="w-full" alt="Slide 4" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="w-1/2">
        <img src="https://img.daisyui.com/images/stock/photo-1550258987-190a2d41a8ba.webp" class="w-full" alt="Slide 5" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="w-1/2">
        <img src="https://img.daisyui.com/images/stock/photo-1559181567-c3190ca9959b.webp" class="w-full" alt="Slide 6" />
    </c-lb.carousel.item>
    <c-lb.carousel.item class="w-1/2">
        <img src="https://img.daisyui.com/images/stock/photo-1601004890684-d8cbf643f5f2.webp" class="w-full" alt="Slide 7" />
    </c-lb.carousel.item>
</c-lb.carousel>

With Indicator Buttons

1 2 3 4 
<div class="flex w-full flex-col gap-4">
    <c-lb.carousel class="w-full">
        <c-lb.carousel.item id="item1" class="w-full">
            <img src="https://img.daisyui.com/images/stock/photo-1625726411847-8cbb60cc71e6.webp" class="w-full" alt="Slide 1" />
        </c-lb.carousel.item>
        <c-lb.carousel.item id="item2" class="w-full">
            <img src="https://img.daisyui.com/images/stock/photo-1609621838510-5ad474b7d25d.webp" class="w-full" alt="Slide 2" />
        </c-lb.carousel.item>
        <c-lb.carousel.item id="item3" class="w-full">
            <img src="https://img.daisyui.com/images/stock/photo-1414694762283-acccc27bca85.webp" class="w-full" alt="Slide 3" />
        </c-lb.carousel.item>
        <c-lb.carousel.item id="item4" class="w-full">
            <img src="https://img.daisyui.com/images/stock/photo-1665553365602-b2fb8e5d1707.webp" class="w-full" alt="Slide 4" />
        </c-lb.carousel.item>
    </c-lb.carousel>
    <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>

With Next/Previous Buttons

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

API Reference

c-lb.carousel

Property Type Default Required Description
class string - No Additional CSS classes to apply
snap
start center end
start No Snap position for carousel items
direction
horizontal vertical
horizontal No Carousel scroll direction
Slot Name Description
default Carousel content using carousel.item components

c-lb.carousel.item

Property Type Default Required Description
class string - No Additional CSS classes to apply
id string - No Unique ID for anchor-based navigation
Prev Card
Next Chat