Swiper thumbnail carousel with fancy lightbox

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
Start By Linking Files
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.6/dist/jquery.fancybox.min.css">
<style>
body {
padding: 50px;
background: #0f0f0f;
}
h1 {
text-align: center;
padding-bottom: 50px;
}
.swiper-slide {
overflow: hidden;
border-radius: 30px;
}
.swiper-slide img {
width: 100%;
max-height: 245px;
transition: all 0.3s ease-in;
display: block;
} .swiper-slide:hover img {
transform: scale(1.2);
transition: all 0.3s ease-in;
opacity: 0.9;
}
</style>
<div class="swiper thumbnail-slider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<a href="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" data-fancybox="gallery">
<img src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" data-fancybox="gallery">
<img src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" data-fancybox="gallery">
<img src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" data-fancybox="gallery">
<img src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" data-fancybox="gallery">
<img src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</a>
</div>
<div class="swiper-slide">
<a href="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" data-fancybox="gallery">
<img src="https://frontendhack.com/wp-content/uploads/2024/02/Frontend-Hacks-1.png" alt="">
</a>
</div>
</div>
</div>
<script>
var swiper = new Swiper(".thumbnail-slider", {
breakpoints: {
// when width of your window reaches >= 320px
320: {
slidesPerView: 1,
spaceBetween: 20
},
//when width of your window reaches >= 480px
480: {
slidesPerView: 1,
spaceBetween: 30
},
//when width of your window reaches >= 640px
767: {
slidesPerView: 3,
spaceBetween: 30
}
}
})
</script>