58 lines
3.3 KiB
Plaintext
58 lines
3.3 KiB
Plaintext
<!-- ================= SWIPER CAROUSEL COMPONENT ================= -->
|
|
<div class="course-swiper-component">
|
|
<div class="swiper courseSwiper">
|
|
<div class="swiper-wrapper">
|
|
|
|
<!-- 🟢 LẶP QUA CÁC SLIDE (Mẫu 1 Slide) -->
|
|
<!-- Với Thymeleaf: <div class="swiper-slide" th:each="item : ${courses}"> -->
|
|
<div class="swiper-slide">
|
|
<article class="relative p-3 lg:p-4 bg-white rounded-lg border border-gray-100 group flex flex-col justify-between text-left w-full h-full">
|
|
<div class="flex flex-col gap-3.5">
|
|
<a class="relative overflow-hidden rounded block aspect-[9/5]" href="{{linkUrl}}" th:href="@{${item.linkUrl}}">
|
|
<img alt="{{title}}" th:alt="${item.title}" class="object-cover h-full w-full" data-src="{{imageUrl}}" th:src="@{${item.imageUrl}}"/>
|
|
<div class="absolute inset-0 w-full h-full bg-black/40 opacity-0 lg:group-hover:opacity-100 duration-300 ease-in-out"></div>
|
|
</a>
|
|
<div class="px-1.5 w-full flex flex-col gap-3.5">
|
|
<div class="w-full space-y-1">
|
|
<a class="title-1 font-bold line-clamp-2 lg:group-hover:text-primary-600 duration-300 ease-in-out block text-[20px] h-[54px] leading-[1.5]"
|
|
href="{{linkUrl}}" th:href="@{${item.linkUrl}}" th:text="${item.title}">
|
|
{{title}}
|
|
</a>
|
|
<div class="body-3 text-gray-700 line-clamp-3 text-[14px] h-[64px] leading-[1.5] overflow-hidden"
|
|
th:text="${item.description}">
|
|
{{description}}
|
|
</div>
|
|
</div>
|
|
<div class="w-full h-px bg-gray-100"></div>
|
|
<div class="flex justify-between items-center w-full">
|
|
<div class="flex gap-4 items-center self-stretch my-auto">
|
|
<div class="flex gap-1.5 items-center self-stretch my-auto">
|
|
<svg class="lucide lucide-calendar size-3.5" fill="none" height="14" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" width="14" xmlns="http://www.w3.org/2000/svg"><path d="M8 2v4"></path><path d="M16 2v4"></path><rect height="18" rx="2" width="18" x="3" y="4"></rect><path d="M3 10h18"></path></svg>
|
|
<time class="self-stretch body-3 my-auto text-[14px]" th:text="${item.date}">{{date}}</time>
|
|
</div>
|
|
<span class="text-primary-600 font-bold border-b-2 border-primary-600 text-[14px]" th:text="'(' + ${item.badge} + ')'">({{badge}})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="btn mt-auto pt-3">
|
|
<a class="p-2 lg:p-3 w-full text-white bg-primary-600 rounded lg:hover:bg-primary-300 duration-300 ease-in-out block"
|
|
href="{{linkUrl}}" th:href="@{${item.linkUrl}}">
|
|
<div class="flex items-center gap-0.5 justify-center w-full font-bold text-[18px]">
|
|
<span th:text="${item.price}">{{price}}</span>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
<!-- 🔴 END SLIDE -->
|
|
|
|
</div>
|
|
|
|
<!-- Nút mũi tên điều hướng 2 bên -->
|
|
<div class="swiper-button-prev"></div>
|
|
<div class="swiper-button-next"></div>
|
|
</div>
|
|
</div>
|
|
<!-- ================= END COMPONENT ================= --> |