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.
Preview
Approach :
- Begin by creating a folder and adding HTML, CSS, and JavaScript files. Integrate the HTML file with the CSS and JavaScript files for cohesive functionality.
- In the HTML file, develop the card layout structure and incorporate essential content such as images and names to be displayed on the card.
- Utilize the CSS file to style the card, ensuring proper visualization through color, shapes, and appropriate width and height adjustments.
- Write the main logic for the card slider functionality in the JavaScript file. Implement actions such as moving the card to the right or left upon clicking or dragging, as well as adjusting card position based on user interaction with arrow icons.
- Ensure seamless integration and functionality between the HTML, CSS, and JavaScript files to create a responsive and interactive card slider.
Example :The below code example implements the HTML, CSS and JavaScript to create A Draggable Card Slider with interactive Sliding operations.
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=
</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=
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=
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=
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=
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=
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=
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>
|
CSS
* { 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%;
}
} |
Javascript
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:
Create A Draggable Card Slider in HTML CSS & JavaScript