728x90
안녕하세요 이번 시간에는 이미지와 같은 컨텐츠를 표시할 때, 여러 개의 아이템을 한 번에 보여주는 캐러셀을 구현해보겠습니다.
Swiper 라이브러리와 Tailwind CSS 를 활용하여 만들어보겠습니다.
https://stickode.tistory.com/982
위 블로그를 참고해서 먼저 카드 컴포넌트를 만들어 줍니다.
그리고 스와이퍼 사용을 위한 코드를 조금 수정하겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>카드 컴포넌트 캐러셀</title>
<link rel="stylesheet" href="output.css" />
<link
rel="stylesheet"
href="https://unpkg.com/swiper/swiper-bundle.min.css"
/>
<!-- 추가된 코드 -->
<style>
.swiper-slide:not(.swiper-slide-active) {
visibility: hidden;
}
</style>
</head>
<body class="bg-gray-200 flex items-center justify-center min-h-screen">
<div class="max-w-2xl">
<!-- 추가된 코드 -->
<!-- Swiper Container -->
<div
class="swiper-container bg-white p-6 rounded-lg shadow-xl max-w-sm mx-auto transition-transform transform hover:scale-105"
>
<!-- Slides Wrapper -->
<div class="swiper-wrapper">
<!-- Each Slide (Card Component) -->
<div class="swiper-slide">
<div
class="bg-white p-6 rounded-lg shadow-xl max-w-sm transition-transform transform hover:scale-105"
>
<div class="relative">
<img
src="assets/img/image1.jpg"
alt="Placeholder Image"
class="rounded-t-lg mb-4 w-full"
/>
<div
class="absolute bottom-0 bg-black bg-opacity-60 text-white p-3"
>
<h3 class="font-semibold">이미지 타이틀 1</h3>
</div>
</div>
<h2 class="text-2xl mb-2">제목 1</h2>
<p class="text-gray-700">여기에 설명을 작성하세요.</p>
<a
href="#"
class="mt-4 inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors duration-300"
>
더 보기
</a>
</div>
</div>
<div class="swiper-slide">
<div
class="bg-white p-6 rounded-lg shadow-xl max-w-sm transition-transform transform hover:scale-105"
>
<div class="relative">
<img
src="assets/img/image2.jpg"
alt="Placeholder Image"
class="rounded-t-lg mb-4 w-full"
/>
<div
class="absolute bottom-0 bg-black bg-opacity-60 text-white p-3"
>
<h3 class="font-semibold">이미지 타이틀 2</h3>
</div>
</div>
<h2 class="text-2xl mb-2">제목 2</h2>
<p class="text-gray-700">여기에 설명을 작성하세요.</p>
<a
href="#"
class="mt-4 inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors duration-300"
>
더 보기
</a>
</div>
</div>
<div class="swiper-slide">
<div
class="bg-white p-6 rounded-lg shadow-xl max-w-sm transition-transform transform hover:scale-105"
>
<div class="relative">
<img
src="assets/img/image3.jpg"
alt="Placeholder Image"
class="rounded-t-lg mb-4 w-full"
/>
<div
class="absolute bottom-0 bg-black bg-opacity-60 text-white p-3"
>
<h3 class="font-semibold">이미지 타이틀 3</h3>
</div>
</div>
<h2 class="text-2xl mb-2">제목 3</h2>
<p class="text-gray-700">여기에 설명을 작성하세요.</p>
<a
href="#"
class="mt-4 inline-block bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 transition-colors duration-300"
>
더 보기
</a>
</div>
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination mt-4"></div>
<!-- Navigation buttons -->
<div class="swiper-button-prev text-lg"></div>
<div class="swiper-button-next text-lg"></div>
</div>
</div>
<!-- Swiper JS -->
<!-- Swiper 라이브러리를 사용하여 캐러셀의 동작 설정-->
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".swiper-container", {
spaceBetween: 20,
centeredSlides: true,
pagination: {
el: ".swiper-pagination",
clickable: true,
dynamicBullets: true,
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>
'HTML／CSS' 카테고리의 다른 글
| [HTML/CSS] Tailwind로 캘린더 만들기 (2) | 2023.12.04 |
|---|---|
| [HTML/CSS] Tailwind로 사용자 선택 이미지 카드 뷰어 만들기 (0) | 2023.12.01 |
| [HTML/CSS]간단한 메모장 만들기 (0) | 2023.11.16 |
| [HTML/CSS]TailwindCSS 카드 컴포넌트 만들기 (0) | 2023.11.07 |
| [HTML/CSS] Tailwind로 Mac Terminal 만들기 (0) | 2023.11.05 |
