Create A Draggable Card Slider in HTML CSS & JavaScript
Last Updated :
21 May, 2025
In this article, we will demonstrate how to create a draggable card slider using HTML, CSS, and JavaScript. We'll use a GeeksforGeeks card slider as an example and implement the functionality to slide cards left and right using arrow buttons. Additionally, we'll incorporate the draggable option, allowing users to move cards horizontally by clicking and dragging them with the mouse. This draggable card slider will provide a user-friendly way to navigate through card content.
Prerequisite:
Preview:
Step By Step Guide to Create a Draggable Card Slider
- Step 1: Create a folder and add HTML, CSS, and JavaScript files.
- Step 2: Link the CSS and JS files to your HTML file.
- Step 3: Build the card layout in the HTML file with images and text.
- Step 4: Style the cards and layout using CSS.
- Step 5: Write JavaScript to enable left/right card movement using buttons.
- Step 6: Add drag functionality for horizontal card sliding.
- Step 7: Test and ensure smooth integration across all files.
Example :The below code example implements the HTML, CSS and JavaScript to create A Draggable Card Slider with interactive Sliding operations.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="/style.css">
<script src="/script.js" defer></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
</head>
<body>
<div class="wrapper">
<i id="left" class="fa-solid fas fa-angle-left"></i>
<ul class="carousel">
<li class="card">
<div class="img"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20240213150115/ppp.png" alt="" draggable="false"> </div>
<h2 style="color: green; font-weight:bold;">
GeeksforGeeks
</h2>
<span>Coding Platform</span>
</li>
<li class="card">
<div class="img"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20240213150115/ppp.png" alt="" draggable="false"> </div>
<h2 style="color: green; font-weight:bold;">GeeksforGeeks</h2>
<span>Coding Platform</span>
</li>
<li class="card">
<div class="img"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20240213150115/ppp.png" alt="" draggable="false"> </div>
<h2 style="color: green; font-weight:bold;">GeeksforGeeks</h2>
<span>Coding Platform</span>
</li>
<li class="card">
<div class="img"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20240213150115/ppp.png" alt="" draggable="false"> </div>
<h2 style="color: green; font-weight:bold;">GeeksforGeeks</h2>
<span>Coding Platform</span>
</li>
<li class="card">
<div class="img"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20240213150115/ppp.png" alt="" draggable="false"> </div>
<h2 style="color: green; font-weight:bold;">GeeksforGeeks</h2>
<span>Coding Platform</span>
</li>
<li class="card">
<div class="img"><img src="https://media.geeksforgeeks.org/wp-content/uploads/20240213150115/ppp.png" alt="" draggable="false"> </div>
<h2 style="color: green; font-weight:bold;">GeeksforGeeks</h2>
<span>Coding Platform</span>
</li>
</ul>
<i id="right" class="fa-solid fas fa-angle-right"></i>
</div>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Times New Roman', Times, serif;
}
body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 35px;
background: rgb(228, 220, 220);
}
.wrapper {
max-width: 1100px;
width: 100%;
position: relative;
}
.wrapper i {
height: 50px;
width: 50px;
background: rgb(118, 233, 118);
text-align: center;
line-height: 50px;
border-radius: 50%;
cursor: pointer;
position: absolute;
top: 50%;
font-size: 1.25 rem;
transform: translateY(-50%);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.23);
}
.wrapper i:first-child {
left: -22px;
}
.wrapper i:last-child {
right: -22px;
}
.wrapper .carousel {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% / 3) - 12px);
gap: 16px;
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
scrollbar-width: 0;
}
.carousel::-webkit-scrollbar {
display: none;
}
.carousel :where(.card, .img) {
display: flex;
align-items: center;
justify-content: center;
}
.carousel.dragging {
scroll-snap-type: none;
scroll-behavior: auto;
}
.carousel.no-transition {
scroll-behavior: auto;
}
.carousel.dragging .card {
cursor: grab;
user-select: none;
}
.carousel .card {
scroll-snap-align: start;
height: 340px;
list-style: none;
background: #fff;
border-radius: 8px;
display: flex;
cursor: pointer;
width: 98%;
padding-bottom: 15px;
align-items: center;
justify-content: center;
flex-direction: column;
}
.card .img {
background: green;
width: 145px;
height: 145px;
border-radius: 50%;
}
.card .img img {
width: 140px;
height: 140px;
object-fit: cover;
border-radius: 50%;
border: 4px solid #fff;
}
.card h2 {
font-weight: 500;
font-size: 1.56rem;
margin: 30px 0 5px;
}
.card span {
color: #6a6d78;
font-size: 1.31rem;
}
@media screen and (max-width: 900px) {
.wrapper .carousel {
grid-auto-columns: calc((100% / 2) - 9px);
}
}
@media screen and (max-width: 600px) {
.wrapper .carousel {
grid-auto-columns: 100%;
}
}
document.addEventListener("DOMContentLoaded", function() {
const carousel = document.querySelector(".carousel");
const arrowBtns = document.querySelectorAll(".wrapper i");
const wrapper = document.querySelector(".wrapper");
const firstCard = carousel.querySelector(".card");
const firstCardWidth = firstCard.offsetWidth;
let isDragging = false,
startX,
startScrollLeft,
timeoutId;
const dragStart = (e) => {
isDragging = true;
carousel.classList.add("dragging");
startX = e.pageX;
startScrollLeft = carousel.scrollLeft;
};
const dragging = (e) => {
if (!isDragging) return;
// Calculate the new scroll position
const newScrollLeft = startScrollLeft - (e.pageX - startX);
// Check if the new scroll position exceeds
// the carousel boundaries
if (newScrollLeft <= 0 || newScrollLeft >=
carousel.scrollWidth - carousel.offsetWidth) {
// If so, prevent further dragging
isDragging = false;
return;
}
// Otherwise, update the scroll position of the carousel
carousel.scrollLeft = newScrollLeft;
};
const dragStop = () => {
isDragging = false;
carousel.classList.remove("dragging");
};
const autoPlay = () => {
// Return if window is smaller than 800
if (window.innerWidth < 800) return;
// Calculate the total width of all cards
const totalCardWidth = carousel.scrollWidth;
// Calculate the maximum scroll position
const maxScrollLeft = totalCardWidth - carousel.offsetWidth;
// If the carousel is at the end, stop autoplay
if (carousel.scrollLeft >= maxScrollLeft) return;
// Autoplay the carousel after every 2500ms
timeoutId = setTimeout(() =>
carousel.scrollLeft += firstCardWidth, 2500);
};
carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("mousemove", dragging);
document.addEventListener("mouseup", dragStop);
wrapper.addEventListener("mouseenter", () =>
clearTimeout(timeoutId));
wrapper.addEventListener("mouseleave", autoPlay);
// Add event listeners for the arrow buttons to
// scroll the carousel left and right
arrowBtns.forEach(btn => {
btn.addEventListener("click", () => {
carousel.scrollLeft += btn.id === "left" ?
-firstCardWidth : firstCardWidth;
});
});
});
Output:
Similar Reads
How to create image slider using HTML CSS and JavaScript ? An image slide, or slideshow, is a dynamic display of images that automatically transitions from one to the next, often with animations. To create an image slide, use HTML to structure the images, CSS for styling and animations, and JavaScript to control the timing and transitions between images.App
3 min read
Create a Animated Product Card using HTML CSS & JavaScript. In this article, we dive into creating a simple animated product card using HTML, CSS, and JavaScript. Here we're going to create a product card with the product name and price. On hover, it flips and shows detailed information along with a buy button. These cards not only make the website visually
3 min read
Creating a Custom Image Slider using JavaScript An Image Slider or Image Carousel is a popular feature on websites that allows us to display multiple images within a limited space. It helps showcase attractive and dynamic visuals to engage visitors effectively.Steps To Creating a Custom Image Slider using JavaScriptThese are the some steps which
3 min read
Create an Autoplay Carousel using HTML CSS and JavaScript An Autoplay Carousel is a dynamic UI element that automatically cycles through a series of images or content slides, providing a visually engaging way to display information. It enhances user experience by showcasing multiple items in a limited space without manual navigation. This can be implemente
2 min read
Draggable Element Using JavaScript Creating a draggable element and moving it to another place within the page is a very interactive and user-friendly concept that makes it easier for the user. This feature allows the user to click and hold the mouse button over a div, drag it to another location, and release the mouse button to drop
2 min read