<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Swiper Gallery + Fancybox</title>
<!-- Swiper CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<!-- Fancybox CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css">
<style>
body {
font-family: Arial, sans-serif;
background: #f5f5f5;
padding: 40px 0;
}
.gallery-wrapper {
max-width: 600px;
margin: auto;
background: #fff;
padding: 15px;
border-radius: 10px;
}
/* Ảnh lớn */
.gallery-top {
width: 100%;
height: 420px;
margin-bottom: 10px;
}
.gallery-top img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
cursor: zoom-in;
}
/* Ảnh nhỏ */
.gallery-thumbs {
height: 90px;
}
.gallery-thumbs .swiper-slide {
opacity: 0.5;
cursor: pointer;
border-radius: 6px;
}
.gallery-thumbs .swiper-slide-thumb-active {
opacity: 1;
border: 2px solid #ff6600;
}
.gallery-thumbs img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 6px;
}
</style>
</head>
<body>
<div class="gallery-wrapper">
<!-- Swiper ảnh lớn -->
<div class="swiper gallery-top">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a data-fancybox="gallery" href="images/img1.jpg">
<img src="images/img1.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a data-fancybox="gallery" href="images/img2.jpg">
<img src="images/img2.jpg" alt="">
</a>
</div>
<div class="swiper-slide">
<a data-fancybox="gallery" href="images/img3.jpg">
<img src="images/img3.jpg" alt="">
</a>
</div>
</div>
</div>
<!-- Swiper ảnh nhỏ -->
<div class="swiper gallery-thumbs">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="images/img1.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="images/img2.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="images/img3.jpg" alt="">
</div>
</div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<!-- Fancybox JS -->
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.umd.js"></script>
<script>
const thumbsSwiper = new Swiper(".gallery-thumbs", {
spaceBetween: 10,
slidesPerView: 4,
watchSlidesProgress: true,
});
const mainSwiper = new Swiper(".gallery-top", {
spaceBetween: 10,
thumbs: {
swiper: thumbsSwiper,
},
});
</script>
</body>
</html>
Không có nhận xét nào:
Đăng nhận xét