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 swiper
that 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-next
and 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.