---
title: "How To Build A Draggable Slider With JavaScript | CoderPad"
description: "On the desktop, draggable interactions use a mouse and a finger extension to move and pick up objects as we might be able to in real-life situations. Like other gestures, draggable interactions are aesthetically pleasing and increase user interaction, allowing users to stay connected throughout their visit to a site. T"
canonical: "https://coderpad.io/blog/development/how-to-build-a-draggable-slider-with-javascript/"
last_modified: "2026-04-15 16:21:04"
---
[Back to blog](https://coderpad.io/blog/)

# How To Build A Draggable Slider With JavaScript

November 7, 2022 6 Minute Read

By Uma Victor

[Development](https://coderpad.io/blog/development/)

Multitouch gestures like pinching, swiping, and expanding are essentially native to mobile devices like our pads and phones, whereas on desktop, the swipe gesture is most likely to be carried out with mouse events, especially on sites that are specialized in entertainment, education, and we have most recently found them in web projects like e-commerce. This is because the rise of draggable interactions in our mobile browsers gave rise to recent innovations in navigation design.

Its aesthetic objective is to resemble a real-world interaction, bringing skeuomorphic designs to mind. On the desktop, draggable interactions use a mouse and a finger extension to move and pick up objects as we might be able to in real-life situations. Like other gestures, draggable interactions are aesthetically pleasing and increase user interaction, allowing users to stay connected throughout their visit to a site.

In this article, you will build a draggable slider intensively utilizing Javascript and CSS to express your site’s interaction and aesthetics. The GIF below resembles what you will achieve at the end of this tutorial.

A The GIF shows a page containing several cards sliding from right to left and left to the right.

## Prerequisites

There are a few requirements that must be met to effectively follow this article:

- A basic knowledge of [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) elements.
- A solid foundation in [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript).
- A basic understanding of DOM events, especially [mouse events](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent).
- A working understanding of [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS).

## Set up the project

Start by creating a new folder,`draggable`, and open the folder in your code editor. In your code editor, create three files:`index.html`,`index.js`, and`style.css`:

Visual Studio Code editor showing three files`index.html`,`index.js`and`style.css`in the sidebar.

In the`index.html`file, link the`style.css`and`index.js`files:

```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="index.js"></script>
    <title>Draggable site</title>
</head>
<body>
    <h1>let's code</h1>
</body>
</html>Code language: HTML, XML (xml)
```

Open the`index.html`file from your browser. You should see the screen:

The image shows the text Coderpad.

Next, you’ll build the cards for the draggable slider. In your`index.html`file, add the following:

```
<body>
  <div class="container">
      <div class="cards">
          <div class="card">
              <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT_X3kCeWYJuVS-vouoQhCfcRWKwbBX6RG1bA&usqp=CAU" alt="" />
              <div class="card__content">
              <h1>Coderpad</h1>
              <p>
                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!
              </p>
            </div>
          </div>
          <div class="card">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR-jt3d-_xLuJFSQPmo6Tqepn4_wtLlgb9RHA&usqp=CAU" alt="" />
            <div class="card__content">
              <h1>Coderpad</h1>
              <p>
                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!
              </p>
            </div>
          </div>
          <div class="card">
            <img src=" https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSGqsuPapsSkvE1CmgIDKLzz7wae5kXblPhan-of6_uEBgiVuikb7SXAKJuhkEL-7I47Vg&usqp=CAU" alt="" />
            <div class="card__content">
              <h1>Coderpad</h1>
              <p>
                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!
              </p>
            </div>
          </div>
          <div class="card">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8IO5pV7-yK2sN_BWo1UKij8xoRE9g2RoPHgqVD44wG0UAwXJyhPLGr4_-intJUVg-I0w&usqp=CAU
            " alt="" />
            <div class="card__content">
              <h1>Coderpad</h1>
              <p>
                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!
              </p>
            </div>
          </div>
          <div class="card">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTykw4RpJXpvKdG2mioMW0HfzNjXfGtzS_ojZ3adk_IBqp3xSbSVBIv0jJ2khhML_sZv5s&usqp=CAU" alt="" />
            <div class="card__content">
              <h1>Coderpad</h1>
              <p>
                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!
              </p>
            </div>
          </div>
          <div class="card">
            <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQX5G4dIuaf2GvJH8qrsqK8fJI8jcJbxo_SLQapss5k0fgcS0weQz8T2iL19MoQhBLzJQw&usqp=CAU"
            alt="" />
            <div class="card__content">
              <h1>Coderpad</h1>
              <p>
                  CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate's language of choice so hiring!
              </p>
            </div>
          </div>
        </div>
      </div>
      <script src="index.js"></script>
</body>Code language: HTML, XML (xml)
```

Refresh the page in your browser to view the cards you created:

The page containing cards with the text “CoderPad is a simple yet powerful online technical assessment software that makes it easy to interview in the candidate’s language of choice so hiring!”

Next, add some styling in`style.css`:

```
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-family:  sans-serif;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
}

/* global */
img {
  width: 100%;
}

h1 {
  margin: 0.7rem 0;
}

/* container */
.container {
  width: 1000px;
  height: 500px;
  position: relative;

}

/*cards */
.cards {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(6, 400px);
  grid-gap: 20px;
}

/* card */
.card {
  border: 1px solid rgb(204, 204, 204);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0px 5px 20px 0px rgba(69, 67, 96, 0.2);

}

/* card_content */
.card__content {
  color: rgb(139, 137, 137);
  padding: 10px;
}Code language: CSS (css)
```

After styling, your page on the browser should look like this:

The cards are aligned horizontally in a black background and white text font.

## Implement mouse events

The [MouseEvent](https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent#:~:text=The%20MouseEvent%20interface%20represents%20events,Though%20the%20MouseEvent.) interface displays actions taken due to a user’s interaction with a pointing device (such as a mouse). The most frequent actions performed on this interface are`click`,`dblclick`,`mouseup`,`mousedown`, and in our case`mousemove`.

Implement the draggable gesture in your application using JavaScript by following the steps outlined below:

- Select the`container`and`cards`elements and store them in their respective variables:

```
const slider = document.querySelector('.container')
const cards = document.querySelector('.cards')Code language: JavaScript (javascript)
```
- Create a variable to keep track of the user’s mouse event:

```
let isPressed = false;Code language: JavaScript (javascript)
```
- Declare a variable to store the cursor’s horizontal distance from the inner container:

```
let cursorX;Code language: JavaScript (javascript)
```
- Lastly, add a`mousedown` [event listener](https://coderpad.io/blog/development/addeventlistener-javascript/) to the slider variable:

```
slider.addEventListener("mousedown", (e) => {
    isPressed = true;
    cursorX = e.offsetX - cards.offsetLeft;
    slider.style.cursor = "grabbing";
});Code language: PHP (php)
```

The`mousedown`event triggers when your mouse is pushed down. In the code block above, the isPressed variable is set to true whenever the mouse is down. Beneath it, the`cursorX`is defined as the difference of`e.offsetX`and`cards.offsetLeft`, and lastly, the slider’s cursor style is set to`grabbing`which will only run when the mouse cursor hovers over the cards.

>

![ℹ️](https://coderpad.io/assets/emoji/2139.svg) OffsetX retrieves the horizontal position of the mouse pointer in pixels relative to the target element.

If you console log`e.offsetX`and you click on your first card as seen in the GIF below, you have 400pixels, which makes much sense as the grid template column was set to 400pixels:

The horizontal position of the mouse pointer in pixels is logged in the console.

>

![ℹ️](https://coderpad.io/assets/emoji/2139.svg) OffsetLeft returns the left position in pixels relative to the left side of the offset parent

Next, you’ll add an [event listener](https://coderpad.io/blog/development/addeventlistener-javascript/) to listen to the`mousemove`event:

```
slider.addEventListener("mousemove", (e) => {
   if (!isPressed) return;
   e.preventDefault();
   cards.style.left = `${e.offsetX - cursorX}px`;
});Code language: JavaScript (javascript)
```

In the code block above, the slider listens for the`mousemove`event. If the mouse moves, the function then updates the card’s left property with the difference between the`offsetX`and`cursorX`values.

The`mousemove`event in action. The page responds by moving left and right depending on the movement of the mouse.

You must’ve noticed that the sliding experience isn’t smooth and has a forceful drag back. To fix this, add a`pointer-events: none;`to the`cards`element in your stylesheet:

```
.cards {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  grid-template-columns: repeat(6, 400px);
  grid-gap: 20px;
  pointer-events: none;
}Code language: CSS (css)
```
The slider moves smoothly from a left to right direction.

The GIF above indicates an improvement, but then that is not the level of smoothness desired. To get rid of this behavior, add another event listener`mouseup`.

```
window.addEventListener("mouseup", () => {
    isPressed = false;
});Code language: JavaScript (javascript)
```

The`mouseup`event listener triggers when a user stops pressing the mouse. So whenever it triggers, isPressed is set to false. Now the slider should be harnessing the completeness of the grab gesture.

The slider works perfectly with the grab gestures implemented.

The slider is now draggable. The slider gets the current coordinates relative to the left-hand side of the cards and then subtracts that from the offset of the parent div which is the container.

Although the grab gesture is operational, the slider continues to scroll off the page after the cards. To fix this, create a`boundSlides`function which disables the cards if they extend over the container’s width on both sides while sliding. In`index.js`, add the following:

```
function boundSlides() {
  const containerRect = slider.getBoundingClientRect();
  const cardsRect = cards.getBoundingClientRect();

  if (parseInt(cards.style.left) > 0) {
    cards.style.left = 0;
  } else if (cardsRect.right < containerRect.right) {
    cards.style.left = `-${cardsRect.width - containerRect.width}px`;
  }
} Code language: JavaScript (javascript)
```

In the`boundSlides()`function, you defined two variables`containerRect`and`cardsRect`to retrieve and store the information on the size of an element and its position relative to the viewport using the`getBoundingClientRect()`method.

>

💡 What is this [getBoundingClientRect](https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)?

For a better understanding, the values from the`getBoundingClientRec`t() for`cards`and`container`elements are logged in the console when the slider is used:

Values of`container`and`cards`.

The`getBoundingClientRect()`returns an object providing information on the size of an element and its position relative to the [viewport](https://developer.mozilla.org/en-US/docs/Glossary/Viewport).

The left side of the card is greater than zero whenever you slide, and it is at zero without the slide action. In the`boundSlides()`function, if the left property of the cards container is greater than zero, the value of the left property is set to 0. With the GIF below, you can observe that it no longer goes over zero.

Lastly, you need to also do the same to the right. The`boundSlides()`function checks if the cards’ right position is less than the containers’ and then assign the cards’ left position value to the difference of their width.

In the`mousemove`event listener, call the`boundSlides()`function:

```
 slider.addEventListener("mousemove", (e) => {
    if (!isPressed) return;
    e.preventDefault();
    cards.style.left = `${e.offsetX - cursorX}px`;
    boundSlides();
});Code language: JavaScript (javascript)
```

Our draggable gesture is complete! View the draggable slider in action in the sandbox below:

## ta-da 🎉

In this article, you learned how to build a draggable carousel from scratch using vanilla JavaScript leveraging the power of mouse events. Tools of this kind are aesthetically pleasing, which is always a benefit for websites that ask for greater user interaction. I want to take this opportunity to thank you for reading this far.

Uma Victor is a software developer based in Nigeria who is familiar with a variety of different web technologies and frameworks. He is also keen on finding ways to explain things as simple as possible. You can reach out to me on [twitter](https://twitter.com/umavictor_).

## Subscribe for more CoderPad insights

## Trending Articles

Previous slide Next slide [Development

## What is Prompt Engineering?

Introducing AI tools such as ChatGPT and Bard helps increase the efficiency of tasks such as data generation, code generation and completion, text summarization, etc. How were these AI tools trained to answer almost every question you ask them? The answer, prompt engineering, is discussed in this blog post.

Read the post](https://coderpad.io/blog/development/what-is-prompt-engineering/) [Development

## A Guide To Using React’s useCallback() Hook

Are you looking to optimize your React applications? Have you heard of the useCallback hook? useCallback is a powerful React hook that helps you optimize your application by preventing unnecessary re-renders. In this post, we'll dive into React's useCallback() hook, define referential equality and callback functions and how to tie it all together.

Read the post](https://coderpad.io/blog/development/a-guide-to-using-reacts-usecallback-hook/) [Development

## MySQL vs. PostgreSQL: How Do They Compare?

A database is a convenient tool that allows users to access information, maintain records, and apply commonly used operations, such as insertion, modification, deletion, and data organization. Learn about MySQL vs PostgreSQL, their features, advantages, and disadvantages. Finally, check out which one is the best choice for you.

Read the post](https://coderpad.io/blog/development/mysql-vs-postgresql-how-do-they-compare/) [Development

## PostgreSQL LIKE Operator: A Detailed Guide

When using databases, searching for values that match a given pattern is a familiar necessity. Learn how you can retrieve entries with queries including a particular string using Postgres LIKE operator.

Read the post](https://coderpad.io/blog/development/postgresql-like-operator-a-detailed-guide/) [Development

## How To Use DataProvider In TestNG With Examples

When it comes to testing there are many tools and techniques available. In this post, we'll discuss how to use DataProvider with TestNG.

Read the post](https://coderpad.io/blog/development/how-to-use-dataprovider-in-testng-with-examples/) [Development

## How To Get Up And Running With Django Migrations: A Guide

Django migrations are a way of handling the application of changes to a database schema. By following the steps outlined in this guide, you can easily set up and use migrations in your Django projects.

Read the post](https://coderpad.io/blog/development/how-to-get-up-and-running-with-django-migrations-a-guide/) [Development

## Writing A Parameterized Test In JUnit With Examples

A JUnit parameterized test allows you to decouple data from structure, generating cleaner and more reliable tests. Learn more in this guide.

Read the post](https://coderpad.io/blog/development/writing-a-parameterized-test-in-junit-with-examples/) [Development

## How To Use Assert In JUnit With Examples

The JUnit Assert class is what you use to write unit testing assertions in JUnit. Learn more about it in this guide, full of examples.

Read the post](https://coderpad.io/blog/development/how-to-use-assert-in-junit-with-examples/) [Development

## A Simple Guide To TypeORM: What It Is And How To Use It

Considering current languages have object-oriented programming features, most database management systems are based on the relational model, with tables instead of objects. For these reasons, mapping relational objects is very important in development. In this article, you will learn what TypeORM, one of the main tools used today, is.

Read the post](https://coderpad.io/blog/development/a-simple-guide-to-typeorm-what-it-is-and-how-to-use-it/) [Development

## Using PreparedStatement in JDBC With Examples

In this post, we'll see why and how to work with JDBC and PreparedStatement. We will also learn along with examples using code.

Read the post](https://coderpad.io/blog/development/using-preparedstatement-in-jdbc-with-examples/) [Development

## React vs React Native: The Differences Explained

React and React Native are similar in that they both allow web developers to build applications based on the unique concept of components. But the two frameworks do this in radically different ways. In this post, we cover the key differences between react and react native frameworks, implementation, and which is an appropriate choice.

Read the post](https://coderpad.io/blog/development/react-vs-react-native-the-differences-explained/) [Development

## Logging in Django

The most challenging part of fixing a problem is identifying it. Unfortunately, this statement is exceptionally true when it comes to debugging. Learn how to use the power of logging into your Django applications to improve your debug process in this article.

Read the post](https://coderpad.io/blog/development/logging-in-django/)

## Hire with confidence.

See why engineering teams trust CoderPad to evaluate developers with realistic, AI-ready hiring workflows.

[Request a demo](https://coderpad.io/sales/)