Create A Draggable Card Slider in HTML CSS & JavaScript Last Updated : 21 May, 2025 Comments Improve Suggest changes Like Article Like Report 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: HTMLCSSJAVASCRIPTPreview: Step By Step Guide to Create a Draggable Card SliderStep 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> style.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%; } } index.js 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: Comment More infoAdvertise with us Next Article Create A Draggable Card Slider in HTML CSS & JavaScript K kasoti2002 Follow Improve Article Tags : Project JavaScript Web Technologies Dev Scripter JavaScript-Projects Dev Scripter 2024 +2 More 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 How to create Expanding Cards using HTML, CSS and Javascript ? Creating expanding cards using HTML, CSS, and JavaScript involves creating a set of cards that expand when clicked.ApproachSelection of Sections:The code starts by selecting all HTML elements with the class 'section' using the document.querySelectorAll('.section') method.This creates a NodeList cont 2 min read Animated Slideshow App in HTML CSS & JavaScript We will learn to create a slideshow of multiple images. This slideshow will transition between the images every few seconds. we will further learn to align the images, style the images, and make the animation look better.PrerequisitesHTMLCSSJSApproachCreate 3 files one for HTML, one for CSS, and one 3 min read Creating A Range Slider in HTML using JavaScript Range Sliders are used on web pages to allow the user specify a numeric value which must be no less than a given value, and no more than another given value. That is, it allows one to choose the value from a range which is represented as a slider. A Range slider is typically represented using a slid 3 min read Create a Pagination using HTML CSS and JavaScript In this article, we will create a working pagination using HTML, CSS, and JavaScript. Pagination, a widely employed user interface pattern, serves the purpose of dividing extensive data or content into more manageable portions. It allows users the ability to effortleÂssly navigate through numerou 5 min read Create a Toggle Profile Card Details using HTML CSS and JavaScript In this article, we will develop an interactive Toggle Profile Card Details application using HTML, CSS, and JavaScript Language. In this application, we have a Card Component with the user's details like their profile picture and Name. There is a toggle button, and when the button is clicked, the d 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 What is an image slider?An image Slider or Image Carousel is an expedient way to show multiple images on a website. Alluring flashy images can draw many visitors to the site. The below image shows a sample image slider: In this post, we will create the above image slider using HTML, CSS and JavaScri 4 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 Build a Memory Card Game Using HTML CSS and JavaScript A memory game is a type of game that can be used to test or check the memory of a human being. It is a very famous game. In this game, the player has some cards in front of him and all of them facing down initially. The player has to choose a pair of cards at one time and check whether the faces of 6 min read Like