Responsive Card Slider using HTML, CSS and JavaScript || Coding Power


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">
      <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 -->
      <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 class="swiper-button-next arrowButton right"></div>
              <div class="swiper-button-prev arrowButton left"></div>
      <!-- Swiper JS -->
      <script src=""></script>
      <!-- Initialize Swiper -->
        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,

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;

  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0e922;

  width: 100%;
  height: 240px;

  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;

  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;

  left: 0 !important;

  right: 0 !important;

  font-size: 20px !important;

@media only screen and (max-width:868px){
      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.

For Download Code You have to wait 30 seconds.

Post a Comment

Previous Post Next Post