Hello everyone, you can learn how to create a Responsive Card Slider using HTML, CSS, and JavaScript in this blog. So if you want to learn then follow all the steps carefully.
Watch the Full Tutorial on YouTube
Source Code Of Responsive Card Slider
Step 1: Create Index.html File
Create one file with the name index.html and paste the below code into this file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
<title>Image Slider in HTML, CSS & JavaScript - Coding Power</title>
<!-- Link Swiper's CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"
/>
</head>
<body>
<div class="container">
<div class="slider mySwiper">
<div class="image-items swiper-wrapper">
<div class="image swiper-slide"><img src="./images/image1.jpg" alt=""></div>
<div class="image swiper-slide"><img src="./images/image2.jpg" alt=""></div>
<div class="image swiper-slide"><img src="./images/image3.jpg" alt=""></div>
<div class="image swiper-slide"><img src="./images/image4.jpg" alt=""></div>
<div class="image swiper-slide"><img src="./images/image5.jpg" alt=""></div>
<div class="image swiper-slide"><img src="./images/image6.jpg" alt=""></div>
<div class="image swiper-slide"><img src="./images/image7.jpg" alt=""></div>
<div class="image swiper-slide"><img src="./images/image8.jpg" alt=""></div>
<div class="image swiper-slide"><img src="./images/image9.jpg" alt=""></div>
</div>
<div class="swiper-button-next arrowButton right"></div>
<div class="swiper-button-prev arrowButton left"></div>
</div>
</div>
<!-- Swiper JS -->
<script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script>
<!-- Initialize Swiper -->
<script>
var swiper = new Swiper(".mySwiper", {
slidesPerGroup: 1,
loop: true,
fade: true,
grabCursor: true,
loopFillGroupWithBlank: true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
breakpoints: {
500: {
slidesPerView: 2,
spaceBetween: 20,
},
868: {
slidesPerView: 3,
spaceBetween: 30,
},
1000: {
slidesPerView: 4,
spaceBetween: 30,
},
1250: {
slidesPerView: 5,
spaceBetween: 30,
},
},
});
</script>
</body>
</html>Step 2: Create styles.css File
Create one file with the name style.css and paste the below code into this file.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0e922;
}
.container{
width: 100%;
height: 240px;
}
.slider{
margin: 0 40px;
height: 100%;
overflow: hidden;
position: relative;
}
.slider .image-items{
height: 100%;
}
.slider .image-items .image{
height: 100%;
}
.slider .image-items .image img{
height: 100%;
display: block;
width: 100%;
object-fit: cover;
border-radius: 15px;
}
.arrowButton{
position: absolute !important;
top: 50% !important;
color: black !important;
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
background-color: white !important;
padding: 10px !important;
}
.arrowButton.left{
left: 0 !important;
}
.arrowButton.right{
right: 0 !important;
}
.arrowButton::after{
font-size: 20px !important;
}
@media only screen and (max-width:868px){
.slider{
margin: 0 20px;
}
}That's It. if you face any error/problem then comment below or Download this code file and then try again. This file is a Zip file so after downloading you have to extract it.
