Компонент слайдера карусели
Отзывчивый компонент слайдера карусель, разработанный для информационных панелей, с микровзаимодействиями и яркими цветами с поддержкой темного режима.
HTML-код
<div class="relative w-full max-w-screen-lg mx-auto">
<div class="overflow-hidden">
<div class="flex transition-transform duration-300 ease-in-out" style="transform: translateX(0);"><!-- Previous Transform: translateX(-100%) -->
<div class="flex-shrink-0 w-full">
<img src="https://picsum.photos/800/400?random=1" alt="Slide 1" class="w-full h-auto rounded-lg" />
<div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
<h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 1 Title</h3>
<p class="text-gray-800 dark:text-gray-300">Description for slide 1.</p>
</div>
</div>
<div class="flex-shrink-0 w-full">
<img src="https://picsum.photos/800/400?random=2" alt="Slide 2" class="w-full h-auto rounded-lg" />
<div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
<h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 2 Title</h3>
<p class="text-gray-800 dark:text-gray-300">Description for slide 2.</p>
</div>
</div>
<div class="flex-shrink-0 w-full">
<img src="https://picsum.photos/800/400?random=3" alt="Slide 3" class="w-full h-auto rounded-lg" />
<div class="p-4 text-center bg-white dark:bg-gray-800 rounded-b-lg">
<h3 class="text-xl font-semibold text-blue-600 dark:text-blue-400">Slide 3 Title</h3>
<p class="text-gray-800 dark:text-gray-300">Description for slide 3.</p>
</div>
</div>
</div>
</div>
<div class="absolute top-1/2 left-0 transform -translate-y-1/2">
<button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
❮
</button>
</div>
<div class="absolute top-1/2 right-0 transform -translate-y-1/2">
<button class="bg-white text-blue-600 dark:bg-gray-800 dark:text-blue-400 hover:scale-110 transition-transform duration-200 rounded-full p-2 shadow-md">
❯
</button>
</div>
<div class="flex justify-center mt-4 space-x-2">
<button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
<button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
<button class="h-2 w-2 bg-blue-600 dark:bg-blue-400 rounded-full hover:animate-pulse"></button>
</div>
</div>Связанные компоненты
Компонент слайдера карусели
Реализуйте веб-компонент Carousel Slider Component со стилем дизайна "Neumorphism - Мягкий стиль пользовательского интерфейса, который создает элементы, как бы выдавливающиеся из фона с помощью тонких теней" с использованием цветовой схемы "Complementary - Цвета друг напротив друга на цветовом круге" и уровня сложности "Complex - Rich interface with multiple inter elements", для цели "Портфолио - Для демонстрации работы или товаров" с использованием Tailwind CSS. Создайте адаптивный дизайн с поддержкой темных тем. Код JavaScript не нужен, только HTML с классами Tailwind. Для темного режима используйте префикс Tailwind dark: для стилизации. Если нужны изображения, используйте picsum.photos для изображений и randomuser.me для аватаров.
Компонент слайдера карусели
Простой компонент слайдера карусели, предназначенный для электронной коммерции в темном режиме с использованием Tailwind CSS.
Компонент слайдера карусели в темном режиме
Компонент Carousel Slider в темном режиме с отзывчивыми эффектами и поддержкой темной темы с использованием Tailwind CSS.