How to Create a Responsive Card Slider Using HTML, CSS & JS

How to Create a Responsive Card Slider Using HTML, CSS & JS

Sliders are a fantastic way to present content on websites, especially if you’re aiming for a clean and interactive design. Whether you’re showcasing products, portfolios, or images, a responsive card slider can really enhance your website’s user experience.

In this guide, I’ll show you how to create a responsive card slider using HTML, CSS, and JavaScript, and to make it even more appealing, we’ll incorporate the glassmorphism effect. Using SwiperJS, a popular JavaScript library for sliders, we can make the slider touch-friendly and fully responsive for both mobile and desktop.

By the end of this tutorial, you’ll have a fully functional and responsive image slider that you can add to your own website.

Why Use SwiperJS for a Responsive Slider?

SwiperJS is one of the best libraries available for creating interactive and mobile-friendly sliders. It’s easy to set up, highly customizable, and supports modern features like touch gestures, lazy loading, and autoplay.

If you prefer to understand the mechanics behind building sliders from scratch, you can also try creating a slider using vanilla JavaScript. It will help deepen your JavaScript skills, giving you full control over the slider’s behavior.

Now, let’s dive into building our responsive card slider!

Step-by-Step Guide to Creating a Responsive Card Slider with HTML, CSS & JavaScript

Step-by-Step Guide to Creating a Responsive Card Slider with HTML, CSS & JavaScript

1. Set Up Your Project Folder
To begin, create a folder for your project. You can name it something like card-slider. Inside the folder, create the following essential files:

  • index.html for the HTML markup
  • style.css for the CSS styles
  • script.js for the JavaScript code

2. Prepare the Images
For the slider, you’ll need images. Place your images in a folder within the project directory called images. You can use any set of images you like, but it’s important to optimize them for faster loading on both mobile and desktop.

3. Write the HTML Code
In your index.html file, you’ll set up the structure of your card slider. Be sure to include the SwiperJS CDN links to enable all the functionality that the library offers.

<!DOCTYPE html>


<!-- Coding By Abhikesh - www.abhikesh.com -->


<html lang="en">


<head>


  <meta charset="UTF-8">


  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>Card Slider HTML and CSS | Abhikesh</title>


  <!-- Linking SwiperJS CSS -->


  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css">


  <link rel="stylesheet" href="style.css">


</head>


<body>


  <div class="container swiper">


    <div class="slider-wrapper">


      <div class="card-list swiper-wrapper">


        <div class="card-item swiper-slide">


          <img src="images/img-1.jpg" alt="User Image" class="user-image">


          <h2 class="user-name">James Wilson</h2>


          <p class="user-profession">Software Developer</p>


          <button class="message-button">Send</button>


        </div>


        <div class="card-item swiper-slide">


          <img src="images/img-2.jpg" alt="User Image" class="user-image">


          <h2 class="user-name">Sarah Johnson</h2>


          <p class="user-profession">Graphic Designer</p>


          <button class="message-button">Send</button>


        </div>


        <div class="card-item swiper-slide">


          <img src="images/img-3.jpg" alt="User Image" class="user-image">


          <h2 class="user-name">Michael Brown</h2>


          <p class="user-profession">Project Manager</p>


          <button class="message-button">Send</button>


        </div>


        <div class="card-item swiper-slide">


          <img src="images/img-4.jpg" alt="User Image" class="user-image">


          <h2 class="user-name">Emily Davis</h2>


          <p class="user-profession">Marketing Specialist</p>


          <button class="message-button">Send</button>


        </div>


        <div class="card-item swiper-slide">


          <img src="images/img-5.jpg" alt="User Image" class="user-image">


          <h2 class="user-name">Christopher Garcia</h2>


          <p class="user-profession">Data Scientist</p>


          <button class="message-button">Send</button>


        </div>


        <div class="card-item swiper-slide">


          <img src="images/img-6.jpg" alt="User Image" class="user-image">


          <h2 class="user-name">Richard Wilson</h2>


          <p class="user-profession">Product Designer</p>


          <button class="message-button">Send</button>


        </div>


      </div>


      <div class="swiper-pagination"></div>


      <div class="swiper-slide-button swiper-button-prev"></div>


      <div class="swiper-slide-button swiper-button-next"></div>


    </div>


  </div>


  <!-- Linking SwiperJS script -->


  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>


  <!-- Linking custom script -->


  <script src="script.js"></script>


</body>


</html>
4. Style the Slider with CSS
In style.css, you’ll define how your slider looks. We’re using a modern glassmorphism effect, which will give your slider a frosted glass-like appearance. Feel free to play with different color schemes, shadows, and backgrounds to personalize the look.
/* Importing Google Font - Montserrat */


@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


* {


  margin: 0;


  padding: 0;


  box-sizing: border-box;


  font-family: "Montserrat", sans-serif;


}


body {


  display: flex;


  align-items: center;


  justify-content: center;


  min-height: 100vh;


  background: url("images/bg.jpg") #030728 no-repeat center;


}


.slider-wrapper {


  overflow: hidden;


  max-width: 1200px;


  margin: 0 70px 55px;


}


.card-list .card-item {


  height: auto;


  color: #fff;


  user-select: none;


  padding: 35px;


  display: flex;


  flex-direction: column;


  align-items: center;


  justify-content: center;


  border-radius: 10px;


  backdrop-filter: blur(30px);


  background: rgba(255, 255, 255, 0.2);


  border: 1px solid rgba(255, 255, 255, 0.5);


}


.card-list .card-item .user-image {


  width: 150px;


  height: 150px;


  border-radius: 50%;


  margin-bottom: 40px;


  border: 3px solid #fff;


  padding: 4px;


}


.card-list .card-item .user-profession {


  font-size: 1.15rem;


  color: #e3e3e3;


  font-weight: 500;


  margin: 14px 0 40px;


}


.card-list .card-item .message-button {


  font-size: 1.25rem;


  padding: 10px 35px;


  color: #030728;


  border-radius: 6px;


  font-weight: 500;


  cursor: pointer;


  background: #fff;


  border: 1px solid transparent;


  transition: 0.2s ease;


}


.card-list .card-item .message-button:hover {


  background: rgba(255, 255, 255, 0.1);


  border: 1px solid #fff;


  color: #fff;


}


.slider-wrapper .swiper-pagination-bullet {


  background: #fff;


  height: 13px;


  width: 13px;


  opacity: 0.5;


}


.slider-wrapper .swiper-pagination-bullet-active {


  opacity: 1;


}


.slider-wrapper .swiper-slide-button {


  color: #fff;


  margin-top: -55px;


  transition: 0.2s ease;


}


.slider-wrapper .swiper-slide-button:hover {


  color: #4658ff;


}


@media (max-width: 768px) {


  .slider-wrapper {


    margin: 0 10px 40px;


  }


  .slider-wrapper .swiper-slide-button {


    display: none;


  }


}
5. Add JavaScript for Functionality
In script.js, you’ll initialize SwiperJS and add the interactivity. This is where you can configure various features like autoplay, pagination, and touch gestures to make the slider functional across devices.
const swiper = new Swiper('.slider-wrapper', {


    loop: true,


    grabCursor: true,


    spaceBetween: 30,




    // Pagination bullets


    pagination: {


      el: '.swiper-pagination',


      clickable: true,


      dynamicBullets: true


    },


    // Navigation arrows


    navigation: {


      nextEl: '.swiper-button-next',


      prevEl: '.swiper-button-prev',


    },


    // Responsive breakpoints


    breakpoints: {


      0: {


        slidesPerView: 1


      },


      768: {


        slidesPerView: 2


      },


      1024: {


        slidesPerView: 3


      }


    }


  });