A Coding Boy

demo post

only for demo nasa prospect

only for demo the gonnies

most popular

how to create parallax website

how to create a beautiful card

how to create a netflix login page

how to create flipping ui card

how to create image generator website

Create A Draggable Card Slider in HTML CSS & JavaScript

Sliders have become a crucial part of web design, used to showcase content or images in an engaging and interactive way. As a beginner, creating a card slider can help you develop fundamental web development concepts such as DOM manipulation, responsive designs, and JavaScript event listeners.

These concepts are vital for front-end developers to understand and can be applied to various web development projects. So in this blog post, we will show you how to create a responsive draggable card slider in HTML, CSS, and JavaScript, which can be used to display images, products, user profiles, and other content.

Steps To Create Draggable Card Slider in JavaScript

To create a draggable card or image slider using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

1. Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.

2. Create an index.html file. The file name must be index and its extension .html

3. Create a style.css file. The file name must be style and its extension .css

4. Create a script.js file. The file name must be script and its extension .js

First, paste the following codes into your index.html file.

<!DOCTYPE html>

<head>

<title>Infinite Card Slider JavaScript | CodingNepal</title>

</head>

<body>

<h2>Blanche Pearson</h2>

<span>Sales Manager</span>

</li>

<h2>Joenas Brauers</h2>

<span>Web Developer</span>

</li>

<h2>Lariach French</h2>

<span>Online Teacher</span>

</li>

<h2>James Khosravi</h2>

<span>Freelancer</span>

</li>

<h2>Kristina Zasiadko</h2>

<span>Bank Manager</span>

</li>

<h2>Donald Horton</h2>

<span>App Designer</span>

</li>

</ul>

</div>

</body>

</html>

<!DOCTYPE html>  <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Infinite Card Slider JavaScript | CodingNepal</title> <link rel="stylesheet" href="style.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0">  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"> <script src="script.js" defer></script> </head> <body> <div class="wrapper"> <i id="left" class="fa-solid fa-angle-left"></i> <ul class="carousel"> <li class="card"> <div class="img"><img src="images/img-1.jpg" alt="img" draggable="false"></div> <h2>Blanche Pearson</h2> <span>Sales Manager</span> </li> <li class="card"> <div class="img"><img src="images/img-2.jpg" alt="img" draggable="false"></div> <h2>Joenas Brauers</h2> <span>Web Developer</span> </li> <li class="card"> <div class="img"><img src="images/img-3.jpg" alt="img" draggable="false"></div> <h2>Lariach French</h2> <span>Online Teacher</span> </li> <li class="card"> <div class="img"><img src="images/img-4.jpg" alt="img" draggable="false"></div> <h2>James Khosravi</h2> <span>Freelancer</span> </li> <li class="card"> <div class="img"><img src="images/img-5.jpg" alt="img" draggable="false"></div> <h2>Kristina Zasiadko</h2> <span>Bank Manager</span> </li> <li class="card"> <div class="img"><img src="images/img-6.jpg" alt="img" draggable="false"></div> <h2>Donald Horton</h2> <span>App Designer</span> </li> </ul> <i id="right" class="fa-solid fa-angle-right"></i> </div> </body> </html>

Second, paste the following codes into your style.css file

/* Import Google font - Poppins */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Poppins", sans-serif;

}

body {

display: flex;

padding: 0 35px;

align-items: center;

justify-content: center;

min-height: 100vh;

background: linear-gradient(to left top, #031A9A, #8B53FF);

}

.wrapper {

max-width: 1100px;

width: 100%;

position: relative;

}

.wrapper i {

top: 50%;

height: 50px;

width: 50px;

cursor: pointer;

font-size: 1.25rem;

position: absolute;

text-align: center;

line-height: 50px;

background: #fff;

border-radius: 50%;

box-shadow: 0 3px 6px rgba(0,0,0,0.23);

transform: translateY(-50%);

transition: transform 0.1s linear;

}

.wrapper i:active{

transform: translateY(-50%) scale(0.85);

}

.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);

overflow-x: auto;

scroll-snap-type: x mandatory;

gap: 16px;

border-radius: 8px;

scroll-behavior: smooth;

scrollbar-width: none;

}

.carousel::-webkit-scrollbar {

display: none;

}

.carousel.no-transition {

scroll-behavior: auto;

}

.carousel.dragging {

scroll-snap-type: none;

scroll-behavior: auto;

}

.carousel.dragging .card {

cursor: grab;

user-select: none;

}

.carousel :where(.card, .img) {

display: flex;

justify-content: center;

align-items: center;

}

.carousel .card {

scroll-snap-align: start;

height: 342px;

list-style: none;

background: #fff;

cursor: pointer;

padding-bottom: 15px;

flex-direction: column;

border-radius: 8px;

}

.carousel .card .img {

background: #8B53FF;

height: 148px;

width: 148px;

border-radius: 50%;

}

.card .img img {

width: 140px;

height: 140px;

border-radius: 50%;

object-fit: cover;

border: 4px solid #fff;

}

.carousel .card h2 {

font-weight: 500;

font-size: 1.56rem;

margin: 30px 0 5px;

}

.carousel .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%;

}

/* Import Google font - Poppins */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { display: flex; padding: 0 35px; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(to left top, #031A9A, #8B53FF); } .wrapper { max-width: 1100px; width: 100%; position: relative; } .wrapper i { top: 50%; height: 50px; width: 50px; cursor: pointer; font-size: 1.25rem; position: absolute; text-align: center; line-height: 50px; background: #fff; border-radius: 50%; box-shadow: 0 3px 6px rgba(0,0,0,0.23); transform: translateY(-50%); transition: transform 0.1s linear; } .wrapper i:active{ transform: translateY(-50%) scale(0.85); } .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); overflow-x: auto; scroll-snap-type: x mandatory; gap: 16px; border-radius: 8px; scroll-behavior: smooth; scrollbar-width: none; } .carousel::-webkit-scrollbar { display: none; } .carousel.no-transition { scroll-behavior: auto; } .carousel.dragging { scroll-snap-type: none; scroll-behavior: auto; } .carousel.dragging .card { cursor: grab; user-select: none; } .carousel :where(.card, .img) { display: flex; justify-content: center; align-items: center; } .carousel .card { scroll-snap-align: start; height: 342px; list-style: none; background: #fff; cursor: pointer; padding-bottom: 15px; flex-direction: column; border-radius: 8px; } .carousel .card .img { background: #8B53FF; height: 148px; width: 148px; border-radius: 50%; } .card .img img { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; border: 4px solid #fff; } .carousel .card h2 { font-weight: 500; font-size: 1.56rem; margin: 30px 0 5px; } .carousel .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%; } }

Last, paste the following codes into your script.js file.

const wrapper = document.querySelector(".wrapper");

const carousel = document.querySelector(".carousel");

const firstCardWidth = carousel.querySelector(".card").offsetWidth;

const arrowBtns = document.querySelectorAll(".wrapper i");

const carouselChildrens = [...carousel.children];

let isDragging = false, isAutoPlay = true, startX, startScrollLeft, timeoutId;

// Get the number of cards that can fit in the carousel at once

let cardPerView = Math.round(carousel.offsetWidth / firstCardWidth);

// Insert copies of the last few cards to beginning of carousel for infinite scrolling

carouselChildrens.slice(-cardPerView).reverse().forEach(card => {

carousel.insertAdjacentHTML("afterbegin", card.outerHTML);

});

// Insert copies of the first few cards to end of carousel for infinite scrolling

carouselChildrens.slice(0, cardPerView).forEach(card => {

carousel.insertAdjacentHTML("beforeend", card.outerHTML);

});

// Scroll the carousel at appropriate postition to hide first few duplicate cards on Firefox

carousel.classList.add("no-transition");

carousel.scrollLeft = carousel.offsetWidth;

carousel.classList.remove("no-transition");

// 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;

});

const dragStart = (e) => {

isDragging = true;

carousel.classList.add("dragging");

// Records the initial cursor and scroll position of the carousel

startX = e.pageX;

startScrollLeft = carousel.scrollLeft;

}

const dragging = (e) => {

if(!isDragging) return; // if isDragging is false return from here

// Updates the scroll position of the carousel based on the cursor movement

carousel.scrollLeft = startScrollLeft - (e.pageX - startX);

}

const dragStop = () => {

isDragging = false;

carousel.classList.remove("dragging");

}

const infiniteScroll = () => {

// If the carousel is at the beginning, scroll to the end

if(carousel.scrollLeft === 0) {

carousel.classList.add("no-transition");

carousel.scrollLeft = carousel.scrollWidth - (2 * carousel.offsetWidth);

carousel.classList.remove("no-transition");

}

// If the carousel is at the end, scroll to the beginning

else if(Math.ceil(carousel.scrollLeft) === carousel.scrollWidth - carousel.offsetWidth) {

carousel.classList.add("no-transition");

carousel.scrollLeft = carousel.offsetWidth;

carousel.classList.remove("no-transition");

}

// Clear existing timeout & start autoplay if mouse is not hovering over carousel

clearTimeout(timeoutId);

if(!wrapper.matches(":hover")) autoPlay();

}

const autoPlay = () => {

if(window.innerWidth < 800 || !isAutoPlay) return; // Return if window is smaller than 800 or isAutoPlay is false

// Autoplay the carousel after every 2500 ms

timeoutId = setTimeout(() => carousel.scrollLeft += firstCardWidth, 2500);

}

autoPlay();

carousel.addEventListener("mousedown", dragStart);

carousel.addEventListener("mousemove", dragging);

document.addEventListener("mouseup", dragStop);

carousel.addEventListener("scroll", infiniteScroll);

wrapper.addEventListener("mouseenter", () => clearTimeout(timeoutId));

wrapper.addEventListener("mouseleave", autoPlay);

Conclusion and Final Words

By following the steps given in this blog post, I hope you were able to create a custom draggable card slider using HTML, CSS, and JavaScript. By creating the slider from scratch, you gain a deeper understanding of how sliders work and can customize the slider to meet your specific needs.

If you face any difficulties while creating your own card slider or your code is not working as expected, you can download the source code files for this card slider for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.

live demo

Download files

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Glassmorphism Login Form | CodingNepal</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrapper"> <form action="#"> <h2>Login</h2> <div class="input-field"> <input type="text" required> <label>Enter your email</label> </div> <div class="input-field"> <input type="password" required> <label>Enter your password</label> </div> <div class="forget"> <label for="remember"> <input type="checkbox" id="remember"> <p>Remember me</p> </label> <a href="#">Forgot password?</a> </div> <button type="submit">Log In</button> <div class="register"> <p>Don't have an account? <a href="#">Register</a></p> </div> </form> </div> </body> </html>

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@200;300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Open Sans", sans-serif; } body { display: flex; align-items: center; justify-content: center; min-height: 100vh; width: 100%; padding: 0 10px; } body::before { content: ""; position: absolute; width: 100%; height: 100%; background: url("https://www.codingnepalweb.com/demos/create-glassmorphism-login-form-html-css/hero-bg.jpg"), #000; background-position: center; background-size: cover; } .wrapper { width: 400px; border-radius: 8px; padding: 30px; text-align: center; border: 1px solid rgba(255, 255, 255, 0.5); backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); } form { display: flex; flex-direction: column; } h2 { font-size: 2rem; margin-bottom: 20px; color: #fff; } .input-field { position: relative; border-bottom: 2px solid #ccc; margin: 15px 0; } .input-field label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); color: #fff; font-size: 16px; pointer-events: none; transition: 0.15s ease; } .input-field input { width: 100%; height: 40px; background: transparent; border: none; outline: none; font-size: 16px; color: #fff; } .input-field input:focus~label, .input-field input:valid~label { font-size: 0.8rem; top: 10px; transform: translateY(-120%); } .forget { display: flex; align-items: center; justify-content: space-between; margin: 25px 0 35px 0; color: #fff; } #remember { accent-color: #fff; } .forget label { display: flex; align-items: center; } .forget label p { margin-left: 8px; } .wrapper a { color: #efefef; text-decoration: none; } .wrapper a:hover { text-decoration: underline; } button { background: #fff; color: #000; font-weight: 600; border: none; padding: 12px 20px; cursor: pointer; border-radius: 3px; font-size: 16px; border: 2px solid transparent; transition: 0.3s ease; } button:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, 0.15); } .register { text-align: center; margin-top: 30px; color: #fff;}