CCHub Logo CCHub Tailwind Collection
구성 요소 캐러셀 슬라이더 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>

관련 구성 요소

포트폴리오를 위한 3D 캐러셀 슬라이더 구성 요소

반응형 3D에서 영감을 받은 캐러셀 슬라이더 구성 요소로, 포트폴리오 항목을 표시하며, 보색과 다크 모드를 지원합니다. 깊이와 참여도를 염두에 두고 설계되었습니다.

열다

캐러셀 슬라이더 구성 요소 28

반응형 디자인과 어두운 테마 지원을 특징으로 하는 미니멀한 캐러셀 슬라이더 구성 요소입니다.

열다

고정공간 캐러셀 슬라이더 구성 요소

블로그/콘텐츠 표시를 위한 단순하고 깔끔한 고정 공간 스타일의 캐러셀 슬라이더 구성 요소로, 다크 모드를 포함하여 유사한 색 구성표와 완전한 응답성으로 설계되었습니다.

열다