Компоненты Слайдер карусели РетроКарусельСлайдер

РетроКарусельСлайдер

Простой, отзывчивый и ретро-тематический компонент слайдера карусельной галереи для бизнес-сайтов с поддержкой темного режима и без JavaScript.

Предварительный просмотр

HTML-код

<div class="relative w-full max-w-4xl mx-auto overflow-hidden rounded-lg shadow-lg">
  <!-- Carousel Wrapper -->
  <div class="relative h-96">
    <!-- Slide 1 -->
    <div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-100" data-carousel-item>
      <img src="https://picsum.photos/seed/retro1/1200/400" alt="Slide 1" class="object-cover w-full h-full">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
        <h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Innovation That Endures</h2>
      </div>
    </div>

    <!-- Slide 2 -->
    <div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0" data-carousel-item>
      <img src="https://picsum.photos/seed/retro2/1200/400" alt="Slide 2" class="object-cover w-full h-full">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
        <h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Timeless Solutions for Tomorrow</h2>
      </div>
    </div>

    <!-- Slide 3 -->
    <div class="absolute inset-0 transition-opacity duration-1000 ease-in-out opacity-0" data-carousel-item>
      <img src="https://picsum.photos/seed/retro3/1200/400" alt="Slide 3" class="object-cover w-full h-full">
      <div class="absolute inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4">
        <h2 class="text-white text-3xl font-bold font-serif filter drop-shadow">Building on a Legacy of Quality</h2>
      </div>
    </div>
  </div>

  <!-- Carousel Navigation (Optional - for visual representation, actual prev/next usually needs JS) -->
  <div class="absolute bottom-0 left-0 right-0 p-4 flex justify-center space-x-2">
    <button class="w-3 h-3 bg-gray-300 rounded-full dark:bg-gray-700"></button>
    <button class="w-3 h-3 bg-gray-500 rounded-full dark:bg-gray-400"></button>
    <button class="w-3 h-3 bg-gray-300 rounded-full dark:bg-gray-700"></button>
  </div>
</div>

<style>
  /* A very basic animation for demonstration, typically this would be handled by JS for a real carousel */
  /* This CSS just cycles opacity for

Связанные компоненты

3D Карусельный Слайдер

Простой и отзывчивый слайдер карусели со стилем 3D-дизайна и пастельной цветовой гаммой для интерфейсов социальных сетей, поддерживающий темный режим.

Открытый

Brutalism_News_Carousel

Простой, выполненный в бруталистском стиле карусельный слайдер для новостных и журналистских веб-сайтов, отличающийся высокой контрастностью, холодными нейтральными тонами и полной отзывчивостью с поддержкой темного режима. Использует изображения-заполнители и выделяет необработанные визуальные элементы.

Открытый

Слайдер карусели Glassmorphism

Адаптивный компонент слайдера карусели со стилем glassmorphism, подходящий для блога и потребления контента. Он имеет несколько слайдов контента, элементы, похожие на матовое стекло, и предназначен как для светлых, так и для темных тем.

Открытый