<x-base.box>
    <x-base.tiny-slider>
        <div>
            <div class="bg-foreground/5 flex items-center justify-center rounded-xl text-xl">
                <div class="py-10 font-medium">1</div>
            </div>
        </div>
        <div>
            <div class="bg-foreground/5 flex items-center justify-center rounded-xl text-xl">
                <div class="py-10 font-medium">2</div>
            </div>
        </div>
        <div>
            <div class="bg-foreground/5 flex items-center justify-center rounded-xl text-xl">
                <div class="py-10 font-medium">3</div>
            </div>
        </div>
    </x-base.tiny-slider>
</x-base.box>

    <x-base.box>
    <x-base.tiny-slider config="{
                                        responsive: {
                                            600: {
                                                items: 3,
                                            },
                                            480: {
                                                items: 2,
                                            },
                                        },
                                    }">
        <div>
            <div class="bg-foreground/5 flex items-center justify-center rounded-xl text-xl">
                <div class="py-10 font-medium">1</div>
            </div>
        </div>
        <div>
            <div class="bg-foreground/5 flex items-center justify-center rounded-xl text-xl">
                <div class="py-10 font-medium">2</div>
            </div>
        </div>
        <div>
            <div class="bg-foreground/5 flex items-center justify-center rounded-xl text-xl">
                <div class="py-10 font-medium">3</div>
            </div>
        </div>
    </x-base.tiny-slider>
</x-base.box>

    <x-base.box>
    <div class="overflow-hidden rounded-lg px-2">
        <x-base.tiny-slider config="{
                                                center: true,
                                                responsive: {
                                                    600: {
                                                        items: 2,
                                                    },
                                                },
                                            }">
            <div>
                <div class="bg-foreground/5 flex items-center justify-center rounded-xl text-xl">
                    <div class="py-10 font-medium">1</div>
                </div>
            </div>
            <div>
                <div class="bg-foreground/5 flex items-center justify-center rounded-xl text-xl">
                    <div class="py-10 font-medium">2</div>
                </div>
            </div>
            <div>
                <div class="bg-foreground/5 flex items-center justify-center rounded-xl text-xl">
                    <div class="py-10 font-medium">3</div>
                </div>
            </div>
        </x-base.tiny-slider>
    </div>
</x-base.box>