Discover how to build a captivating slider using Swiper.js! This slider features dynamic effects, engaging overlays, and a sleek design that will enhance your website’s visual appeal. Perfect for showcasing images with interactive elements, this guide walks you through the setup, customization, and enhancement of a responsive and eye-catching slider that will captivate your audience. Dive in and transform your content into a visually striking experience!
<html>
<head>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/11.0.5/swiper-bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/tsparticles@1.26.0/dist/tsparticles.min.js"></script>
</head>
<body>
<div id="tsparticles"></div>
<section>
<div class="content">
<h1>Embark on Your Next Adventure!</h1>
<p>
Explore our curated travel experiences that will take you to the heart of the world's most breathtaking places. Create unforgettable memories with us as you uncover hidden gems, iconic sites, and immerse yourself in the rich cultural diversity of each destination.
</p>
</div>
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1494253109108-2e30c049369b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Walking Tour in Florence"
/>
<div class="cost">from $230 per group</div>
<div class="overlay">
<h1>Walking Tour in Florence</h1>
<p>
Experience the charm of Florence by walking through its streets and discovering its rich history and culture.
</p>
<div class="ratings">
<div class="stars">
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star-half-outline" name="star-half-outline"></ion-icon>
</div>
<span>138 reviews</span>
</div>
</div>
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1508138221679-760a23a2285b?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Edinburgh Guided Tour"
/>
<div class="cost">from $380 per group</div>
<div class="overlay">
<h1>Edinburgh Guided Tour</h1>
<p>
Discover Scotland's capital, filled with majestic castles and a rich historical narrative.
</p>
<div class="ratings">
<div class="stars">
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star-outline"></ion-icon>
</div>
<span>307 reviews</span>
</div>
</div>
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1496449903678-68ddcb189a24?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="New York Sightseeing Tour"
/>
<div class="cost dark-text">from $99 per adult</div>
<div class="overlay">
<h1>New York Sightseeing Tour</h1>
<p>
Witness the vibrancy of New York City as you tour iconic sites from Times Square to Central Park.
</p>
<div class="ratings">
<div class="stars">
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star-half-outline" name="star-half-outline"></ion-icon>
</div>
<span>1152 reviews</span>
</div>
</div>
</div>
<div class="swiper-slide">
<img
src="https://images.unsplash.com/photo-1504805572947-34fad45aed93?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
alt="Japan Panoramic Tours"
/>
<div class="cost dark-text">from $117 per adult</div>
<div class="overlay">
<h1>Japan Panoramic Tours</h1>
<p>
Discover the beauty of Tokyo during cherry blossom season, a breathtaking journey through one of Japan's most dynamic cities.
</p>
<div class="ratings">
<div class="stars">
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star"></ion-icon>
<ion-icon class="star" name="star-outline"></ion-icon>
</div>
<span>619 reviews</span>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
<style>
@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@700&family=Nunito:wght@300;600&display=swap");
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Nunito", sans-serif;
}
body {
background: #162561;
background-image: radial-gradient(
circle at 20% 100%,
rgba(184, 184, 184, 0.1) 0%,
rgba(184, 184, 184, 0.1) 33%,
rgba(96, 96, 96, 0.1) 33%,
rgba(96, 96, 96, 0.1) 66%,
rgba(7, 7, 7, 0.1) 66%,
rgba(7, 7, 7, 0.1) 99%
),
linear-gradient(40deg, #040a22, #162561, #202e64, #6f7aa6);
background-repeat: no-repeat;
background-size: cover;
}
#tsparticles {
position: fixed;
width: 100%;
height: 100%;
z-index: -1;
}
section {
display: grid;
grid-template-columns: 50% 45%;
place-items: center;
gap: 60px;
min-height: 100vh;
padding: 20px 60px;
}
/* CONTENT */
.content {
max-width: 2400px;
}
.content h1 {
font-family: "Comfortaa", sans-serif;
font-size: clamp(2rem, 4vw, 3.5rem);
font-weight: 700;
line-height: 1.2;
letter-spacing: 1px;
margin-bottom: 36px;
color: #fff;
}
.content p {
font-size: clamp(0.9rem, 3vw, 1.25rem);
font-weight: 300;
line-height: 1.5;
margin-bottom: 30px;
color: #fff;
}
.swiper {
position: relative;
width: 400px;
height: 490px;
}
.swiper-slide {
position: relative;
border: 1px solid rgba(255, 255, 255, 0.3);
user-select: none;
border-radius: 20px;
}
.cost {
position: absolute;
top: 8px;
right: 6px;
background: rgba(255, 255, 255, 0.3);
backdrop-filter: blur(6px);
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
border-radius: 30px;
padding: 6px 10px;
color: #fff;
font-size: clamp(0.8rem, 4vw, 0.9rem);
font-weight: 600;
}
.swiper-slide img {
width: 100%;
height: 100%;
border-radius: 20px;
}
.overlay {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
left: 0;
bottom: 0;
width: 100%;
height: 150px;
padding: 10px 20px;
background: rgba(93, 95, 145, 0.2);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
border-radius: 0 0 20px 20px;
}
.overlay h1 {
font-size: clamp(1.2rem, 4vw, 1.4rem);
font-weight: 600;
color: #fff;
margin-bottom: 10px;
}
.overlay p {
font-size: clamp(0.8rem, 4vw, 1rem);
font-weight: 300;
color: #fff;
margin-bottom: 8px;
}
.ratings {
display: flex;
gap: 6px;
}
.stars {
display: flex;
}
.stars ion-icon {
font-size: clamp(0.9rem, 4vw, 1rem);
}
.ratings span {
font-size: clamp(0.75rem, 4vw, 0.9rem);
font-weight: 300;
color: rgba(255, 255, 255, 0.7);
}
.dark-text {
background: rgba(255, 255, 255, 0.7) !important;
color: #333 !important;
}
</style>
<script>
var swiper = new Swiper(".swiper", {
effect: "cube",
grabCursor: true,
loop: true,
speed: 1000,
cubeEffect: {
shadow: false,
slideShadows: true,
shadowOffset: 10,
shadowScale: 0.94,
},
autoplay: {
delay: 300,
pauseOnMouseEnter: true,
},
});
tsParticles.load("tsparticles", {
fpsLimit: 60,
backgroundMode: {
enable: true,
zIndex: -1,
},
particles: {
number: {
value: 30,
density: {
enable: true,
area: 800,
},
},
color: {
value: [
"#3998D0",
"#2EB6AF",
"#A9BD33",
"#FEC73B",
"#F89930",
"#F45623",
"#D62E32",
],
},
destroy: {
mode: "split",
split: {
count: 1,
factor: {
value: 5,
random: {
enable: true,
minimumValue: 4,
},
},
rate: {
value: 10,
random: {
enable: true,
minimumValue: 5,
},
},
particles: {
collisions: {
enable: false,
},
destroy: {
mode: "none",
},
life: {
count: 1,
duration: {
value: 1,
},
},
},
},
},
shape: {
type: "circle",
stroke: {
width: 0,
color: "#000000",
},
polygon: {
sides: 5,
},
},
opacity: {
value: 1,
random: false,
animation: {
enable: false,
speed: 1,
minimumValue: 0.1,
sync: false,
},
},
size: {
value: 8,
random: {
enable: true,
minimumValue: 4,
},
animation: {
enable: false,
speed: 40,
minimumValue: 0.1,
sync: false,
},
},
collisions: {
enable: true,
mode: "destroy",
},
move: {
enable: true,
speed: 7,
direction: "none",
random: false,
straight: false,
out_mode: "out",
attract: {
enable: false,
rotateX: 600,
rotateY: 1200,
},
},
},
detectRetina: true,
});
</script>
</html>
Credit : https://codepen.io/ecemgo/pen/ZEPYNXJ
