Creating interactive swipeable cards is a great way to showcase content in a visually appealing and engaging way. In this tutorial, you’ll learn how to build a swipeable card gallery with smooth transitions, stylish designs, and navigation buttons using HTML, CSS, and JavaScript.
By the end of this guide, you’ll have a fully functional swipeable card slider that can be easily integrated into your website or project. Let’s get started! 🎯
📌 What You’ll Learn
✅ How to create a swipeable card gallery using HTML 🖥️
✅ Styling the cards with CSS for a sleek and modern look 🎨
✅ Adding JavaScript for smooth sliding transitions ⬇️
✅ Implementing navigation buttons for seamless interaction 🌟
✅ Customizing card designs with unique background colors 🎯
💻 Step-by-Step Guide: Swipeable Card Gallery
1️⃣ HTML Structure
We’ll start by creating a simple HTML structure with a container that holds the swipeable cards and navigation buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Swipeable Cards</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Swipeable Card Gallery</h1>
<div class="container">
<div class="cards" id="cards">
<div class="card" style="background-color: #ff7eb3;">Card 1</div>
<div class="card" style="background-color: #42e695;">Card 2</div>
<div class="card" style="background-color: #4776e6;">Card 3</div>
<div class="card" style="background-color: #ee9ca7;">Card 4</div>
</div>
<button class="prev" onclick="swipeLeft()">‹</button>
<button class="next" onclick="swipeRight()">›</button>
</div>
<script src="script.js"></script>
</body>
</html>
2️⃣ Styling with CSS
Next, we add CSS to style the card layout, container, and navigation buttons.
body {
margin: 0;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f0f0f5;
font-family: Arial, sans-serif;
}
h1 {
font-size: 32px;
margin-bottom: 20px;
color: #333;
text-align: center;
}
.container {
width: 300px;
overflow: hidden;
position: relative;
}
.cards {
display: flex;
transition: transform 0.5s ease;
}
.card {
min-width: 100%;
height: 400px;
background-color: #fff;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #333;
text-transform: uppercase;
}
button {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: #333;
color: #fff;
border: none;
padding: 10px;
border-radius: 50%;
cursor: pointer;
font-size: 18px;
opacity: 0.7;
transition: opacity 0.3s;
}
button:hover {
opacity: 1;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
3️⃣ JavaScript for Swipe Functionality
To enable swipe functionality, we’ll use JavaScript to move the card container left and right.
let currentIndex = 0;
const cards = document.getElementById('cards');
const totalCards = document.querySelectorAll('.card').length;
function swipeLeft() {
currentIndex = (currentIndex - 1 + totalCards) % totalCards;
updateCardPosition();
}
function swipeRight() {
currentIndex = (currentIndex + 1) % totalCards;
updateCardPosition();
}
function updateCardPosition() {
cards.style.transform = `translateX(-${currentIndex * 100}%)`;
}
🎥 Watch the Full Video Tutorial
📺 Watch the tutorial here
This video walks you through the process step-by-step so you can easily follow along and implement it yourself.
🛠️ Code Repository
Get the full source code on GitHub:
👉 GitHub Repository
🚀 Conclusion
Congratulations! 🎉 You’ve successfully built a swipeable card gallery with HTML, CSS, and JavaScript. Now, you can customize the design, add more cards, or even enhance it with touch gestures for mobile users.
This feature is perfect for:
✅ Image galleries
✅ Product showcases
✅ Testimonial sliders
✅ Interactive content sections
🔔 Stay Connected
🔹 Like, Share, and Comment if you found this tutorial helpful!
🔹 Subscribe to Madras Academy and turn on notifications for more web development tutorials.
💬 Have Questions?
Drop your queries in the comments below, and I’ll be happy to help!
🚀 #HTML #CSS #JavaScript #WebDesign #SwipeableCards #WebDevelopment #FrontendDevelopment #TechTutorial #InteractiveDesign #UserExperience