轮播滑块组件 28

<div class="relative bg-white dark:bg-gray-800 rounded-lg overflow-hidden shadow-lg">
    <div class="overflow-hidden">
        <div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0%);">
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=1" alt="Carousel Image 1" class="w-full h-auto" />
            </div>
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=2" alt="Carousel Image 2" class="w-full h-auto" />
            </div>
            <div class="min-w-full flex-shrink-0">
                <img src="https://picsum.photos/800/400?random=3" alt="Carousel Image 3" class="w-full h-auto" />
            </div>
        </div>
    </div>
    <div class="absolute inset-0 flex items-center justify-between p-4">
        <button class="bg-white dark:bg-gray-700 text-black dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-200 dark:hover:bg-gray-600">
            &#10094;
        </button>
        <button class="bg-white dark:bg-gray-700 text-black dark:text-white p-2 rounded-full shadow-lg hover:bg-gray-200 dark:hover:bg-gray-600">
            &#10095;
        </button>
    </div>
</div>

<style>
    /* Dark mode support */
    @media (prefers-color-scheme: dark) {
        .bg-gray-800 {
            background-color: #1F2937;
        }
        .hover\:bg-gray-600:hover {
            background-color: #4B5563;
        }
    }
</style>