Creating a Draggable Carousel using JavaScript

A draggable carousel is a useful tool to display a set of cards, images, or information in a concise and responsive way. After facing this problem at work, I decided to learn how to create it and will be showing all the details in this post.

Get Zena A’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

To create the draggable carousel we will need some HTML, CSS and Vanilla JavaScript code. The one we are creating occupies the entire page width, but I will show also be showing how to set a custom width.

Draggable Carousel Output

Create HTML components

Create a container div, an inner-container div, and each item component.

<div class="container">
    <div class="inner-container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
</div>

Add basic styles

Set up style for classes container, inner-container, and item with CSS

.container {
width: 100%;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow: hidden;
}

.items-container {
display: flex;
gap: 10px;
pointer-events: none;
position: absolute;
top: 0;
left: 0;
}

.item {
height: 200px;
width: 200px;
border-radius: 5px;
background-color: lightgrey;
}

The absolute position is being used because we will be dealing with the left handle with JS. The output right now should look similar to this:

Carousel with HTML and CSS only

Creating the draggable carousel with JavaScript

First we need to get all the necessary variables that we are going to work with

let container = document.querySelector(".container");
let innerContainer = document.querySelector(".inner-container");

let pressed = false;
let startX;
let x;

Insert the event listeners

container.addEventListener("mousedown", (e) => {
    pressed = true;
    startX = e.offsetX - innerContainer.offsetLeft;
    container.style.cursor = "grabbing";
});

container.addEventListener("mouseenter", () => {
    container.style.cursor = "grab";
});

container.addEventListener("mouseup", () => {
    container.style.cursor = "grab";
    pressed = false;
});

container.addEventListener("mousemove", (e) => {
    if (!pressed) return;
    e.preventDefault();

    x = e.offsetX;
    innerContainer.style.left = `${x - startX}px`;
});

At this moment we have the carousel running, however it doesn’t have any ending boundary. This is how we are going to set it up:

let boundItems = () => {
    let outer = container.getBoundingClientRect();
    let inner = innerContainer.getBoundingClientRect();

    if (parseInt(innerContainer.style.left) > 0) {
    innerContainer.style.left = "0px";
    }

    if (inner.right < outer.right) {
    innerContainer.style.left = `-${inner.width - outer.width}px`;
    }
};

And we need to insert the boundItems() function inside the “mousemove” event:

container.addEventListener("mousemove", (e) => {
    if (!pressed) return;
    e.preventDefault();

    x = e.offsetX;
    innerContainer.style.left = `${x - startX}px`;
    boundItems();
});

Final result

Set max width

To set a certain width size to the container, you just have to adjust the container width to less than 100%.

Conclusion

We learned how to create a draggable carousel using HTML, CSS and JavaScript. I hope this post was helpful to you and you were able to follow along.

Thanks for reading.