How to make a Responsive Cards Slider

Card slider is a cool layout feature that you can add to make your webpage look awesome. Here we have used bootstrap and swiper to make a card slider. There are many features in swiperthat one can choose to make different types of sliders.

Step 1: Add swiper and bootstrap

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>Card Slider</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- bootstrap link -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">

     <!-- swiper css link -->
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body>

     <!-- bootstrap  -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>

    <!-- swiper-bundle -->
  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
</body>

</html>

Start with basic HTML format. Now add bootstrap's and swiper's CSS link in the head tag and their javascript bundles in the body tag. Bootstrap provides pre-defined CSS classes and Swiper provides easy to use built-in sliders.

Step 2: Card

<div class="card" >
      <figure >
        <img src="hotel2.jpg" alt="Hotel" >
      </figure>

      <div class="card-body">
        <h5 class="card-title">Hotel 1</h5>
        <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      </div>
</div>

1. First, add a div tag with class card. Now add figure tag, inside it add img tag to add image and add file path in the src attribute.

2. Add a div inside card div after figure tag with class = "card-body".

3. Add an h5 tag with class = "card-title". and a p tag with class = "card-text".

Note : All of the above classes are pre-defined bootstrap's classes.

Step 3. CSS for Card

<style type="text/css">
    
    .card{
       width: 18rem;
      border-radius: 10px;
      border:none;
      box-shadow: 10px 4px 10px rgba(0,0,0,0.6);
     
    }

   img{
    width: 100%;
    border-radius:10px 10px 0 0;
   }

   
  </style>

Add CSS for .card and img in a style tag. In .card giving width property value of 18rem , border-radius to make curvy corners, box-shadow property for a 3d effect. In img tag width is 100% so that it fits within the card's boundaries and lastly, border-radius is given to the top-left and top-right corners of the image.

Step 4: Slider

Now the card is complete, let's make a slider

<div class="container">
  <div class="swiper-container mySwiper my-5 py-5">
    <div class="swiper-wrapper">
      <div class="swiper-slide d-flex justify-content-center">
      </div>

      <div class="swiper-slide d-flex justify-content-center">
      </div>

      <div class="swiper-slide d-flex justify-content-center">
      </div>

      <div class="swiper-slide d-flex justify-content-center">
      </div>
    </div>

    <!--  for left and right navigation buttons -->

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

  </div>
</div>

First, add a div tag with the bootstrap classcontainer . Now add a div tag in container div and give it class swiper-container mySwiper my-5 py-5. This div is a container for the card slider, mySwiper will be used for the javascript function that is described in the next section, my-5 and py-5 for margin and padding on top and bottom. Now add another div inside this div with class swiper-wraper. Now add a div with class swiper-slider. Add swiper-slide class according to cards you want.

If you want 10 cards in your slide then you have to add 10 swiper-slide class. Add two more div inside swiper-container, one with class swiper-button-nextand the other with class swiper-button-prev. These are buttons for left and right pagination.

<script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1,
      spaceBetween: 30,
      slidesPerGroup: 1,
      breakpoints: {
       768: {
          slidesPerView: 2,
        },

        991: {
          slidesPerView: 3,
        },
      },
      loop: true,
      navigation:{
        nextEl:".swiper-button-next",
        prevEl: ".swiper-button-prev",
      }


    });

  </script>

Add the above javascript code. The number of slides in a single view is set by default slidesPerView: 1 i.e only 1 card will be shown per slide also breakpoint is added for different screen sizes. slidesPerGroup: 1 is for how many cards you want to turn on every slide, loop: true is for infinite slides, navigation for left & right navigation.

Final Step:

<div class="container" >
  <div class="swiper-container mySwiper my-5 py-5 ">
    <div class="swiper-wrapper">
     
      
      <div class="swiper-slide d-flex justify-content-center">
        <div class="card" >
          <figure class="mb-0" >
            <img src="hotel2.jpg" alt="Hotel" >
          </figure>

          <div class="card-body bg-light d-flex flex-column justify-content-center">
            <h5 class="card-title">Hotel 1</h5>
            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </p>
          </div>
        </div>
      </div>

      
      <div class="swiper-slide d-flex justify-content-center">
        <div class="card" >
          <figure >
            <img src="hotel3.jpg" >
          </figure>

          <div class="card-body">
            <h5 class="card-title">Hotel 2</h5>
            <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
            </p>
          </div>
        </div>
      </div>

      
      <div class="swiper-slide d-flex justify-content-center">
       <div class="card" >
         <figure >
           <img src="hotel4.jpg" >
         </figure>

         <div class="card-body">
           <h5 class="card-title">Hotel 3</h5>
           <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
           </p>
          </div>

        </div>
      </div>

      
      <div class="swiper-slide d-flex justify-content-center">
        <div class="card" >
         <figure >
          <img src="hotel5.jpg" >
         </figure>

         <div class="card-body">
           <h5 class="card-title">Hotel 4</h5>
           <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
           </p>
         </div>
        </div>
      </div>
    </div>
  </div>
</div>

In the end, cut the code of Step:2 and paste it inside each swiper-slider div. Change image source, and other text of each card.

How to make a Responsive Cards Slider

Step 1: Add swiper and bootstrap

Step 2: Card

Step 3. CSS for Card

Step 4: Slider

Final Step:

Click on banner below to Learn: PHP with Laravel for beginners - Become a Master in Laravel

About Sachin Kumar

Related Articles

5 Elite and Imperative Hybrid App Frameworks

Cheap Django Hosting

Blade Template in Laravel 7

Full-Stack Web Development with React

Best Udemy Courses

Top Posts

Recent Posts

The Complete Web Developer Course - Build 25 Websites

Subscribe

Any Course on Udemy in $6 (INR 455)

PHP with Laravel for beginners - Become a Master in Laravel

Site Sections

Useful Links