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

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

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

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

HTML-код

<div class="relative w-full max-w-4xl mx-auto mt-10">
  <div class="flex overflow-hidden rounded-lg shadow-lg">
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=1" alt="Carousel Slide 1">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 1</div>
    </div>
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=2" alt="Carousel Slide 2">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 2</div>
    </div>
    <div class="flex-shrink-0 w-full h-64 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="w-full h-full object-cover rounded-lg" src="https://picsum.photos/800/400?random=3" alt="Carousel Slide 3">
      <div class="absolute inset-0 flex items-center justify-center text-white opacity-80 text-2xl">Slide 3</div>
    </div>
  </div>
  <div class="flex justify-center mt-4">
    <button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Previous</button>
    <button class="px-4 py-2 mx-1 text-sm font-semibold text-white bg-blue-500 rounded-full hover:bg-blue-600 dark:bg-blue-700 dark:hover:bg-blue-600">Next</button>
  </div>
  <div class="mt-4 flex justify-around">
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="Avatar 1">
      <p class="text-center text-white mt-2">Author 1</p>
    </div>
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 2">
      <p class="text-center text-white mt-2">Author 2</p>
    </div>
    <div class="p-4 bg-white bg-opacity-30 backdrop-blur-md border border-transparent rounded-lg dark:bg-gray-800">
      <img class="h-12 w-12 rounded-full" src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 3">
      <p class="text-center text-white mt-2">Author 3</p>
    </div>
  </div>
</div>

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

Skeuomorphic_Dating_Carousel

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

Открытый

Brutalism_News_Carousel

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

Открытый

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

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

Открытый