This tutorial will guide you through creating a captivating responsive slider with a stunning Swiper Slider 3D Coverflow effect. This effect is perfect for showcasing images or content in a visually engaging way, and the slider will adapt seamlessly to different screen sizes, ensuring a great user experience on any device. By following these steps, you’ll have an interactive slider that adds a touch of elegance and interactivity to your website.
Step 1: Include Header Assets
To begin, you need to include the necessary CSS stylesheets in the <head> section of your HTML document. These stylesheets provide the styling and functionality for the Swiper slider.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" /><link rel="stylesheet" href="https://public.codepenassets.com/css/normalize-5.0.0.min.css">
Step 2: Construct the HTML Structure
Now, let’s create the basic HTML structure for the slider. This involves setting up the container, the Swiper slider itself, and the individual slides containing your content.
<div class="container">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide swiper-slide-active">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/487.svg" alt="">
<div class="info">
<h4 class="name">
Giratina
</h4>
<span class="type">
Ghost, Dragon
</span>
</div>
</div>
<div class="swiper-slide swiper-slide-active">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/384.svg" alt="">
<div class="info">
<h4 class="name">
Rayquaza
</h4>
<span class="type">
Dragon, Flying
</span>
</div>
</div>
<div class="swiper-slide swiper-slide-active">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/646.svg" alt="">
<div class="info">
<h4 class="name">
Kyrum
</h4>
<span class="type">
Dragon, Ice
</span>
</div>
</div>
<div class="swiper-slide swiper-slide-active">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/249.svg" alt="">
<div class="info">
<h4 class="name">
Lugia
</h4>
<span class="type">
Psychic, Flying
</span>
</div>
</div>
<div class="swiper-slide swiper-slide-active">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/dream-world/383.svg" alt="">
<div class="info">
<h4 class="name">
Groudon
</h4>
<span class="type">
Ground
</span>
</div>
</div>
</div>
<!-- If we need pagination -->
<div class="swiper-pagination"></div>
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
Step 3: Apply CSS Styles
Next, we’ll apply CSS styles to customize the appearance of the slider. This includes defining the layout, colors, and animations to achieve the desired 3D-Coverflow effect.
@import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap");
body {
padding: 0;
margin: 0;
background-color: #17141d;
color: white;
font-family: "DM Mono", monospace;
}
.container {
width: 100%;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.swiper {
width: 100%;
padding-top: 50px;
padding-bottom: 50px;
}
.swiper .swiper-slide {
position: relative;
width: 300px;
height: 400px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
filter: grayscale(80%);
transition: all 0.8s cubic-bezier(0.25, 0.4, 0.45, 1.4);
border-radius: 15px;
background: linear-gradient(to right, #c31432, #240b36);
overflow: hidden;
}
.swiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: contain;
}
.swiper .swiper-slide .info {
width: 100%;
position: absolute;
bottom: 0;
z-index: 10;
padding: 15px;
box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -120px black;
}
.swiper .swiper-slide .info h4 {
margin: 0;
padding-bottom: 10px;
}
.swiper .swiper-slide-active {
filter: none;
}
.swiper .swiper-pagination-bullet-active {
background-color: #c31432 !important;
}
.swiper .swiper-pagination-bullet {
background-color: grey;
}
.swiper .swiper-button-prev,
.swiper .swiper-button-next {
top: 50%;
width: 40px;
height: 40px;
background: white;
border: 3px solid #240b36;
border-radius: 50%;
color: #c31432;
font-weight: 700;
outline: 0;
transition: background-color 0.2s ease, color 0.2s ease;
}
.swiper .swiper-button-prev::after,
.swiper .swiper-button-next::after {
font-size: 18px;
}
.swiper .swiper-button-prev:after {
position: relative;
left: -1px;
}
.swiper .swiper-button-next:after {
position: relative;
left: 1px;
}
.swiper .swiper-button-prev,
.swiper .swiper-container-rtl .swiper-button-next {
left: 10px;
right: auto;
}
.swiper .swiper-button-next,
.swiper .swiper-container-rtl .swiper-button-prev {
right: 10px;
left: auto;
}
.swiper .swiper-button-prev.swiper-button-disabled,
.swiper .swiper-button-next.swiper-button-disabled {
opacity: 0;
cursor: auto;
pointer-events: none;
}
Step 4: Implement JavaScript Functionality
Finally, we’ll add the JavaScript code to initialize the Swiper slider and enable the 3D-Coverflow effect. This script also handles autoplay, pagination, and navigation.
var swiper = new Swiper(".swiper", {
effect: "coverflow",
grabCursor: true,
centeredSlides: true,
slidesPerView: "auto",
autoplay: {
delay: 3000
},
coverflowEffect: {
rotate: 0,
stretch: 0,
depth: 100,
modifier: 2,
slideShadows: true
},
spaceBetween: 50,
loop: true,
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev"
}
});
Step 5: Include Footer Assets
This is the final step where we load all the JS dependencies for slider to work smoothly.
<script src='https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js'></script>
With these steps completed, you should now have a fully functional and visually appealing responsive slider with a Swiper Slider 3D Coverflow effect. This enhancement can significantly improve the user experience on your website.
