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 

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Card Slider</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. <!-- bootstrap link -->
  8. <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
  9. integrity="sha384-wEmeIV1mKuiNpC+IOBjI7aAzPcEZeedi5yW5f2yOq55WWLwNGmvvx4Um1vskeMj0" crossorigin="anonymous">
  10. <!-- swiper css link -->
  11. <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  12. </head>
  13. <body>
  14. <!-- bootstrap -->
  15. <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.bundle.min.js"
  16. integrity="sha384-p34f1UUtsS3wqzfto5wAAmdvj+osOnFyQFpp4Ua3gs/ZVWx6oOypYoCJhGGScy+8" crossorigin="anonymous"></script>
  17. <!-- swiper-bundle -->
  18. <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  19. </body>
  20. </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

  1. <div class="card" >
  2. <figure >
  3. <img src="hotel2.jpg" alt="Hotel" >
  4. </figure>
  5. <div class="card-body">
  6. <h5 class="card-title">Hotel 1</h5>
  7. <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
  8. </div>
  9. </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

  1. <style type="text/css">
  2. .card{
  3. width: 18rem;
  4. border-radius: 10px;
  5. border:none;
  6. box-shadow: 10px 4px 10px rgba(0,0,0,0.6);
  7. }
  8. img{
  9. width: 100%;
  10. border-radius:10px 10px 0 0;
  11. }
  12. </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 

  1. <div class="container">
  2. <div class="swiper-container mySwiper my-5 py-5">
  3. <div class="swiper-wrapper">
  4. <div class="swiper-slide d-flex justify-content-center">
  5. </div>
  6. <div class="swiper-slide d-flex justify-content-center">
  7. </div>
  8. <div class="swiper-slide d-flex justify-content-center">
  9. </div>
  10. <div class="swiper-slide d-flex justify-content-center">
  11. </div>
  12. </div>
  13. <!-- for left and right navigation buttons -->
  14. <div class="swiper-button-next"></div>
  15. <div class="swiper-button-prev"></div>
  16. </div>
  17. </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.

  1. <script>
  2. var swiper = new Swiper(".mySwiper", {
  3. slidesPerView: 1,
  4. spaceBetween: 30,
  5. slidesPerGroup: 1,
  6. breakpoints: {
  7. 768: {
  8. slidesPerView: 2,
  9. },
  10. 991: {
  11. slidesPerView: 3,
  12. },
  13. },
  14. loop: true,
  15. navigation:{
  16. nextEl:".swiper-button-next",
  17. prevEl: ".swiper-button-prev",
  18. }
  19. });
  20. </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: 

  1. <div class="container" >
  2. <div class="swiper-container mySwiper my-5 py-5 ">
  3. <div class="swiper-wrapper">
  4. <div class="swiper-slide d-flex justify-content-center">
  5. <div class="card" >
  6. <figure class="mb-0" >
  7. <img src="hotel2.jpg" alt="Hotel" >
  8. </figure>
  9. <div class="card-body bg-light d-flex flex-column justify-content-center">
  10. <h5 class="card-title">Hotel 1</h5>
  11. <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  12. </p>
  13. </div>
  14. </div>
  15. </div>
  16. <div class="swiper-slide d-flex justify-content-center">
  17. <div class="card" >
  18. <figure >
  19. <img src="hotel3.jpg" >
  20. </figure>
  21. <div class="card-body">
  22. <h5 class="card-title">Hotel 2</h5>
  23. <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  24. </p>
  25. </div>
  26. </div>
  27. </div>
  28. <div class="swiper-slide d-flex justify-content-center">
  29. <div class="card" >
  30. <figure >
  31. <img src="hotel4.jpg" >
  32. </figure>
  33. <div class="card-body">
  34. <h5 class="card-title">Hotel 3</h5>
  35. <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  36. </p>
  37. </div>
  38. </div>
  39. </div>
  40. <div class="swiper-slide d-flex justify-content-center">
  41. <div class="card" >
  42. <figure >
  43. <img src="hotel5.jpg" >
  44. </figure>
  45. <div class="card-body">
  46. <h5 class="card-title">Hotel 4</h5>
  47. <p class="card-text">Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  48. </p>
  49. </div>
  50. </div>
  51. </div>
  52. </div>
  53. </div>
  54. </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. 




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

About Sachin Kumar

I am Sachin Kumar. I am a freelancer who works in front-end and Flutter. Here at flowkl.com, I write about CSS animations and beautiful UI & UX in Flutter. You can contact me at sachin@flowkl.com

Related Articles

With the expanding market of mobile apps, the developers are struggling to maintain the code bases for Native apps. M...
5 Elite and Imperative Hybrid App Frameworks
Django is a great framework in python. But all of the hosting do not provide django hosting in their shared or free h...
Cheap Django Hosting
Laravel provides blade template. Blade files are similar to php files and cover all features of php files. In additio...
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

Subscribe now and get weekly updates directly in your inbox!

Any Course on Udemy in $6 (INR 455)

Development Category (English)300x250

PHP with Laravel for beginners - Become a Master in Laravel