Sliders are an essential part of modern web design. They’re commonly used to display content like testimonials, products, or portfolios. Not only do they look great, but they also enhance user experience by making websites more interactive and visually appealing.
SwiperJS is a powerful and customizable slider library that makes it easy to create smooth, responsive card sliders. With support for touch gestures, navigation arrows, and pagination bullets, it’s simple to implement with just HTML, CSS, and JavaScript. Whether you’re building a personal portfolio or a professional site, a SwiperJS slider can add a dynamic touch to your project.
In this post, I’ll guide you through creating a fully responsive card slider with SwiperJS. It’s designed to be mobile-friendly and looks great on any device. If you’re up for a challenge, I also have a tutorial on creating an interactive card slider using just HTML, CSS, and vanilla JavaScript. This version doesn’t rely on any external libraries, so it’s a great way to learn the mechanics behind sliders and boost your coding skills.
Why Build a Card Slider as a Beginner?
If you’re learning front-end development, creating a card slider is an ideal hands-on project. Here’s why:
- Real-World Practice: Sliders are widely used in landing pages, portfolios, and online stores, making it a great way to apply your skills in a practical project.
- Responsive Design: Master the art of creating layouts that seamlessly adapt to different screen sizes, from desktop to mobile.
- SwiperJS: Gain hands-on experience with one of the most popular and powerful libraries for building smooth, interactive sliders.
- CSS Layouts: Enhance your skills with Flexbox, media queries, and card layouts while working on a dynamic project.
- Portfolio-Ready: A well-crafted, interactive slider will make a great addition to your portfolio, showcasing your ability to create modern UI components.
Video Tutorial of Responsive Card Slider in HTML CSS & JavaScript
If you prefer learning through video, be sure to check out the YouTube tutorial linked above. It takes you through the entire process step by step, with clear explanations and practical examples. Whether you’re following along visually or jumping to specific sections, the video has everything you need to understand how the slider works and how to implement it yourself.
If you’re more of a reader, don’t worry—keep scrolling to find the complete step-by-step breakdown of how to create this responsive card slider from scratch.
Steps to Create a Responsive Card Slider using HTML, CSS & JavaScript
To build your responsive card slider with HTML, CSS, and JavaScript (using SwiperJS), follow these easy steps:
- Create Your Project Folder: Start by creating a new folder for your project. Name it something like card-slider.
- Set Up Your Files: Inside the folder, create three files:
index.html,style.css, andscript.js. - Add Images: Download the Images folder and place it in your project directory. This folder contains all the images needed for the slider, but you can also use your own images.
In your index.html file, add the essential HTML structure. Use semantic tags and include the SwiperJS CDN links to build the foundation of your card slider.
<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Card Slider HTML & CSS | CodingNepal</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/design.jpg" alt="Design Trends" />
<div class="card-tag">Design</div>
</div>
<div class="card-content">
<h3 class="card-title">Modern UI Trends for 2025</h3>
<p class="card-text">Explore the latest user interface design trends that are shaping the digital landscape this year. From neumorphism to glassmorphism and beyond.</p>
<div class="card-footer">
<div class="card-profile">
<img src="images/user-1.jpg" alt="Alex Smith" />
<div class="card-profile-info">
<span class="card-profile-name">Alex Smith</span>
<span class="card-profile-role">UI Designer</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/development.jpg" alt="Development" />
<div class="card-tag">Development</div>
</div>
<div class="card-content">
<h3 class="card-title">Best Frontend Frameworks</h3>
<p class="card-text">A comprehensive comparison of the most popular frontend frameworks and libraries that developers are using to build modern web applications.</p>
<div class="card-footer">
<div class="card-profile">
<img src="images/user-2.jpg" alt="Jessica Chen" />
<div class="card-profile-info">
<span class="card-profile-name">Jessica Chen</span>
<span class="card-profile-role">Developer</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/ai.jpg" alt="AI" />
<div class="card-tag">AI</div>
</div>
<div class="card-content">
<h3 class="card-title">AI User Experience Design</h3>
<p class="card-text">How artificial intelligence is revolutionizing user experience design and enabling more personalized, intuitive interfaces for digital products.</p>
<div class="card-footer">
<div class="card-profile">
<img src="images/user-3.jpg" alt="Marcus Johnson" />
<div class="card-profile-info">
<span class="card-profile-name">Marcus Johnson</span>
<span class="card-profile-role">UX Researcher</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/productivity.jpg" alt="Productivity" />
<div class="card-tag">Productivity</div>
</div>
<div class="card-content">
<h3 class="card-title">Workspace Design for Focus</h3>
<p class="card-text">Designing workspaces that maximize productivity and minimize distractions for creative professionals in the hybrid work environment.</p>
<div class="card-footer">
<div class="card-profile">
<img src="images/user-4.jpg" alt="Sarah Miller" />
<div class="card-profile-info">
<span class="card-profile-name">Sarah Miller</span>
<span class="card-profile-role">Interior Designer</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/animation.jpg" alt="Animation" />
<div class="card-tag">Animation</div>
</div>
<div class="card-content">
<h3 class="card-title">Micro Animation Designs</h3>
<p class="card-text">The small animations and interactions that make a big difference in user experience and how to implement them effectively in your designs.</p>
<div class="card-footer">
<div class="card-profile">
<img src="images/user-5.jpg" alt="David Park" />
<div class="card-profile-info">
<span class="card-profile-name">David Park</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>
<!-- Custom Script -->
<script src="script.js"></script>
</body>
</html>
In your style.css file, style the card slider to make it look good and responsive. Play around with different colors, fonts, and backgrounds to customize the design to your liking.
/* Importing Google fonts - Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,[email protected],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(#EFEFFF, #CCCBFF);
}
.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;
aspect-ratio: 16 / 9;
}
.card .card-image .card-tag {
position: absolute;
top: 25px;
left: 25px;
font-size: 0.75rem;
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;
}
}
In your script.js file, initialize SwiperJS with JavaScript to bring the card slider to life. Configure the Swiper methods for functionality like navigation, pagination, and autoplay.
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,
},
},
});
Feel free to customize the slider to suit your needs. The SwiperJS documentation provides a wide range of options if you’re interested in exploring more features and experimenting with different settings. If you prefer to disable the autoplay feature, simply remove the autoplay method from the configuration and delete the related CSS code.
Conclusion and Final Words
By following the steps outlined in this post, you should now have your very own custom responsive card slider built with HTML, CSS, and JavaScript. Building this from scratch gives you a better understanding of how sliders function, and it also allows you to easily customize it for your own projects.
For more inspiration, take a look at my blog post featuring 10+ Best Image Sliders with Source Code. This collection includes a variety of slider examples, some built with SwiperJS, others with Owl Carousel, and a few crafted using vanilla JavaScript. It’s a great resource to explore different approaches and find new ideas for your own projects.
If you encounter any issues while building your slider or if your code isn’t behaving as expected, don’t stress! You can download the source code for this card slider for free by clicking the download button below. Alternatively, you can check out a live demo of the card slider by clicking the “View Live” button.
