In today’s rapidly evolving digital landscape, the method of presenting information significantly impacts its reception. One such contemporary and visually striking technique for displaying content is through sliding cards. These are interactive, scrollable panels that are becoming increasingly popular in websites, mobile applications, and digital presentations, enhancing user engagement and experience.
Sliding cards are not merely a design trend — they serve as an efficient way to arrange and showcase information effectively. With the ongoing expansion of digital world and the rising number of users accessing the internet through smartphones, the significance of sleek, adaptable, and captivating UI components such as sliding cards will continue to rise. Regardless of whether you are a designer, developer, or business owner, integrating sliding cards can significantly improve user experience and elevate the visibility of your content.
In this article, I’ll walk you through the process of building a completely responsive card slider using SwiperJS. It is designed to be user-friendly on mobile devices and appears fantastic on any screen.
SwiperJS is an effective and adaptable slider library that simplifies the creation of seamless, responsive card sliders. Featuring support for touch interactions, navigation arrows, and pagination dots, it can be easily integrated with HTML, CSS and JavaScript. Whether you are developing a personal portfolio or a business website, a SwiperJS slider can bring a lively element to your project.
To construct your responsive sliding cards using HTML, CSS, and JavaScript (with SwiperJS), follow these straightforward steps:
- PROJECT FOLDER
Begin by establishing a new folder for your project. You might name it something like sliding cards. Within the folder, create three files and one folder: index.html, style.css, script.js and images folder.
- IMAGE FOLDER
Once project folder is created, then copy all images from downloaded images folder and paste into your images folder. This folder contains all the images required for the slider, but you can also opt to use your images.
- HTML CODE
In your file index.html, incorporate the necessary HTML structure. Utilize semantic tags and add the SwiperJS CDN links to lay the groundwork for your sliding cards.
<!DOCTYPE html>
<!-- Coding By Coding Jasim - www.codingjasimweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sliding Card HTML CSS & JavaScript | Coding Jasim</title>
<!-- Linking Swiper 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="wrapper">
<div class="card-list swiper-wrapper">
<!-- Single Card -->
<div class="card swiper-slide">
<div class="card-image">
<img src="images/INDIA.jpg" alt="Design Trends" />
<div class="card-tag">Men in Blue</div>
</div>
<div class="card-content">
<h3 class="card-title">Indian Cricket Team inspires millions</h3>
<p class="card-text">The Indian cricket team uniquely blends rich tradition with modern flair, boasting legendary players, passionate fans, and historic achievements, including two World Cup wins and dominance across all formats globally.</p>
<div class="card-footer">
<div class="card-profile">
<img src="images/Rahul Dravid.jpg" alt="Alex Smith" />
<div class="card-profile-info">
<span class="card-profile-name">Rahul Dravid</span>
<span class="card-profile-role">India Team Coach</span>
</div>
</div>
<a href="#" class="card-button">Read More</a>
</div>
</div>
</div>
<!-- Single Card -->
<div class="card swiper-slide">
<div class="card-image">
<img src="images/Australia.jpg" alt="Development" />
<div class="card-tag">The Aussies</div>
</div>
<div class="card-content">
<h3 class="card-title">Australian cricket team dominates with pride</h3>
<p class="card-text">The Australian cricket team is renowned for its aggressive playing style, unmatched consistency, and record fice ICC Cricket World Cup titles, making it one of the most successful teams in cricket history.</p>
<div class="card-footer">
<div class="card-profile">
<img src="images/Andrew McDonald Australia.jpg" alt="Jessica Chen" />
<div class="card-profile-info">
<span class="card-profile-name">Andrew McDonald</span>
<span class="card-profile-role">Astralia Team Coach</span>
</div>
</div>
<a href="#" class="card-button">Read More</a>
</div>
</div>
</div>
<!-- Single Card -->
<div class="card swiper-slide">
<div class="card-image">
<img src="images/England.jpg" alt="AI" />
<div class="card-tag">Three Lions</div>
</div>
<div class="card-content">
<h3 class="card-title">England cricket team blends tradition brilliantly</h3>
<p class="card-text">The England cricket team, birth place of the sport, uniquely balances deep-rooted tradition with bold innovation, winning the 2019 World Cup in a thrilling final and revolutionizing the game with dynamic playing styles.</p>
<div class="card-footer">
<div class="card-profile">
<img src="images/Brendon McCullum England.jpg" alt="Marcus Johnson" />
<div class="card-profile-info">
<span class="card-profile-name">Brendon McCullum</span>
<span class="card-profile-role">England team coach</span>
</div>
</div>
<a href="#" class="card-button">Read More</a>
</div>
</div>
</div>
<!-- Single Card -->
<div class="card swiper-slide">
<div class="card-image">
<img src="images/New Zealand.jpg" alt="Productivity" />
<div class="card-tag">Black Caps</div>
</div>
<div class="card-content">
<h3 class="card-title">New Zealand cricket team shows sportsmanship</h3>
<p class="card-text">The New Zealand cricket team is admired for its sportsmanship, resilience, and consistency, often punching above its weight, reaching multiple World Cup finals, and earning global respect as true gentlemen of the game.</p>
<div class="card-footer">
<div class="card-profile">
<img src="images/Gary Stead New Zealand.jpg" alt="Sarah Miller" />
<div class="card-profile-info">
<span class="card-profile-name">Gary Stead</span>
<span class="card-profile-role">New Zealand Coach</span>
</div>
</div>
<a href="#" class="card-button">Read More</a>
</div>
</div>
</div>
<!-- Single Card -->
<div class="card swiper-slide">
<div class="card-image">
<img src="images/South Africa.jpg" alt="Animation" />
<div class="card-tag">The Proteas</div>
</div>
<div class="card-content">
<h3 class="card-title">South African cricket team showcases talent</h3>
<p class="card-text">The South African cricket team known as the Proteas, is uniquely talented and athletic, often dominating with world-class players, yet famously enigmatic in ICC tournaments, earning a reputation for heartbreaking near-misses.</p>
<div class="card-footer">
<div class="card-profile">
<img src="images/Shukri Conrad South Africa.jpg" alt="David Park" />
<div class="card-profile-info">
<span class="card-profile-name">Shukri Conrad</span>
<span class="card-profile-role">Motion Designer</span>
</div>
</div>
<a href="#" class="card-button">Read More</a>
</div>
</div>
</div>
</div>
<!-- Pagination -->
<div class="swiper-pagination"></div>
<!-- Navigation Buttons -->
<div class="swiper-slide-button swiper-button-prev"></div>
<div class="swiper-slide-button swiper-button-next"></div>
</div>
</div>
<!-- Linking Swiper script -->
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>- CSS CODE
In your style.css file, design the sliding card to enhance its appearance and ensure it is responsive. Experiment with various colors, fonts, and backgrounds to tailor the design to your preference.
/* Importing Google fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,100..900&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Inter", sans-serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(#52e2f1, #7573df);
}
.wrapper {
max-width: 1100px;
padding: 20px 10px;
margin: 0 60px 35px;
overflow: hidden;
}
.wrapper .card {
background: #fff;
display: flex;
height: auto;
flex-direction: column;
border-radius: 20px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.wrapper .card:hover {
transform: translateY(-10px);
}
.card .card-image {
position: relative;
}
.card .card-image img {
width: 100%;
padding: 10px;
border-radius: 22px;
object-fit: cover;
object-fit: fill;
aspect-ratio: 16 / 8.5;
}
.card .card-image .card-tag {
position: absolute;
top: 12px;
left: 180px;
font-size: 0.70rem;
color: #6366f1;
padding: 5px 15px;
border-radius: 30px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
background: rgba(255, 255, 255, 0.9);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.card .card-content {
flex: 1;
display: flex;
flex-direction: column;
padding: 10px 25px 25px;
}
.card .card-content .card-title {
color: #111111;
font-size: 1.25rem;
font-weight: 700;
line-height: 1.3;
margin-bottom: 15px;
}
.card .card-content .card-text {
color: #747474;
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 20px;
}
.card .card-footer {
display: flex;
margin-top: auto;
align-items: center;
padding-top: 15px;
justify-content: space-between;
border-top: 1px solid rgba(0, 0, 0, 0.08);
}
.card .card-footer .card-profile {
display: flex;
align-items: center;
}
.card .card-profile .card-profile-info {
display: flex;
flex-direction: column;
}
.card .card-profile .card-profile-name {
font-size: 0.875rem;
font-weight: 600;
color: #202020;
}
.card .card-profile .card-profile-role {
font-size: 0.8rem;
color: #7A7A7A;
}
.card .card-profile img {
width: 35px;
height: 35px;
margin-right: 10px;
object-fit: cover;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.card .card-button {
color: #fff;
padding: 10px 20px;
border-radius: 30px;
font-size: 0.81rem;
font-weight: 600;
text-decoration: none;
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
box-shadow: 0 4px 10px rgba(99, 102, 241, 0.2);
transition: all 0.3s ease;
}
.card .card-button:hover {
transform: translateY(-3px);
box-shadow: 0 8px 15px rgba(99, 102, 241, 0.3);
}
.wrapper .swiper-pagination-bullet {
height: 15px;
width: 15px;
opacity: 1;
overflow: hidden;
position: relative;
background: #B1B3F8;
}
.wrapper .swiper-pagination-bullet-active {
background: #a4a7fd;
}
/* Auto-play loading indicator */
.wrapper .swiper-pagination-bullet-active::before {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: #6366f1;
transform-origin: left center;
transform: scaleX(0);
animation: autoplay-loading 5s linear forwards;
}
.container:hover .wrapper .swiper-pagination-bullet-active::before {
animation-play-state: paused;
}
@keyframes autoplay-loading {
0% {
transform: scaleX(0);
}
100% {
transform: scaleX(1);
}
}
.wrapper :where(.swiper-button-prev, .swiper-button-next) {
color: #6366f1;
margin-top: -35px;
transition: all 0.3s ease;
}
.wrapper :where(.swiper-button-prev, .swiper-button-next):hover {
color: #8b5cf6;
}
/* Responsive media query code for small screens */
@media (max-width: 768px) {
.wrapper {
margin: 0 10px 25px;
}
.wrapper :where(.swiper-button-prev, .swiper-button-next) {
display: none;
}
}- JavaScript
Now in your script.js file, implement SwiperJs using JavaScript to animate the sliding card. Set up the Swiper methods to enable features such as navigation, autoplay, and pagination.
new Swiper(".wrapper", {
loop: true,
spaceBetween: 30,
// Autoplay
autoplay: {
delay: 5000,
disableOnInteraction: false,
pauseOnMouseEnter: true,
},
// 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,
},
},
});Conclusion & Final Thoughts
By adhering to the steps detailed in this article, you should now possess your very own custom responsive sliding cards crafted with HTML, CSS, and JavaScript. Constructing this from the ground up enhances your comprehension of how sliders work, and it also provides you with the ability to easily modify it for your own projects.
Should you run into any challenges while creating your slider or if your code doesn’t behave as anticipated, don’t worry! You can download the source code for this sliding cards at no cost by clicking the Download Codes button below. Alternatively, you can view a live demonstration of the sliding cards by clicking the “Demo” button.