Create A Draggable Image Slider in HTML CSS & JavaScript

If you’re looking for a touch-friendly draggable image slider or carousel slider that is created with vanilla JavaScript without using any external library or plugin then, this blog is written for you. But for a Swiperjs Image Slider, you can view this blog on Image Slider in HTML CSS and Swiperjs.

Create A Draggable Image Slider in HTML CSS & JavaScript

In this blog, you’ll learn how to Create A Draggable Image Slider in HTML CSS and JavaScript from scratch. This slider supports all major browsers like Chrome, Firefox, and Edge as well as works on mobile or tab devices because of its responsiveness and touch-friendly feature.
Related Articles

If you don’t know, an image slider or carousel is a useful and crucial UI component of the website that is used to showcase multiple images, videos, or graphics in a single horizontal space.

In my draggable image slider, there are some images where users can slide them by dragging or using the next and previous icons. On the desktop screen, there is shown three images at a time but on the mobile screen, there will show one image at a time.

I hope you liked the demo of the Draggable Image Slider and understood the codes and logic behind creating this slider. In the video, you’ve seen I didn’t use any external plugins like Swiperjs or Owl carousel to create this touch-friendly image carousel. It’s all done with pure JavaScript.

Draggable Image Slider in JavaScript [Source Codes]

To create a Draggable Image Slider using HTML CSS and JavaScript, follow the given steps line by line:
  • Create a folder. You can put any name of this folder and create the below-mentioned files inside this folder.
  • Create an index.html file. The file name must be index and its extension .html
  • Create a style.css file. The file name must be style and its extension .css
  • Create a script.js file. The file name must be script and its extension .js
  • Download the images folder from Google Drive and put this folder inside the project folder.

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

<!DOCTYPE html>
<!-- Coding By CodingNepal - -->
<html lang="en" dir="ltr">
    <meta charset="utf-8">
    <title>Draggable Carousel Slider | CodingNepal</title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="">
    <script src="script.js" defer></script>
    <div class="wrapper">
      <i id="left" class="fa-solid fa-angle-left"></i>
      <div class="carousel">
        <img src="images/img-1.jpg" alt="img" draggable="false">
        <img src="images/img-2.jpg" alt="img" draggable="false">
        <img src="images/img-3.jpg" alt="img" draggable="false">
        <img src="images/img-4.jpg" alt="img" draggable="false">
        <img src="images/img-5.jpg" alt="img" draggable="false">
        <img src="images/img-6.jpg" alt="img" draggable="false">
        <img src="images/img-7.jpg" alt="img" draggable="false">
        <img src="images/img-8.jpg" alt="img" draggable="false">
        <img src="images/img-9.jpg" alt="img" draggable="false">
      <i id="right" class="fa-solid fa-angle-right"></i>

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

/* Import Google font - Poppins */
@import url(';500;600&display=swap');
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
  display: flex;
  padding: 0 35px;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  background: #343F4F;
  display: flex;
  max-width: 1200px;
  position: relative;
.wrapper i{
  top: 50%;
  height: 44px;
  width: 44px;
  color: #343F4F;
  cursor: pointer;
  font-size: 1.15rem;
  position: absolute;
  text-align: center;
  line-height: 44px;
  background: #fff;
  border-radius: 50%;
  transform: translateY(-50%);
  transition: transform 0.1s linear;
.wrapper i:active{
  transform: translateY(-50%) scale(0.9);
.wrapper i:hover{
  background: #f2f2f2;
.wrapper i:first-child{
  left: -22px;
  display: none;
.wrapper i:last-child{
  right: -22px;
.wrapper .carousel{
  font-size: 0px;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  cursor: grab;
  scroll-behavior: auto;
.carousel.dragging img{
  pointer-events: none;
.carousel img{
  height: 340px;
  object-fit: cover;
  user-select: none;
  margin-left: 14px;
  width: calc(100% / 3);
.carousel img:first-child{
  margin-left: 0px;

@media screen and (max-width: 900px) {
  .carousel img{
    width: calc(100% / 2);

@media screen and (max-width: 550px) {
  .carousel img{
    width: 100%;

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

const carousel = document.querySelector(".carousel"),
firstImg = carousel.querySelectorAll("img")[0],
arrowIcons = document.querySelectorAll(".wrapper i");

let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;

const showHideIcons = () => {
    // showing and hiding prev/next icon according to carousel scroll left value
    let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
    arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
    arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";

arrowIcons.forEach(icon => {
    icon.addEventListener("click", () => {
        let firstImgWidth = firstImg.clientWidth + 14; // getting first img width & adding 14 margin value
        // if clicked icon is left, reduce width value from the carousel scroll left else add to it
        carousel.scrollLeft += == "left" ? -firstImgWidth : firstImgWidth;
        setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms

const autoSlide = () => {
    // if there is no image left to scroll then return from here
    if(carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;

    positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
    let firstImgWidth = firstImg.clientWidth + 14;
    // getting difference value that needs to add or reduce from carousel left to take middle img center
    let valDifference = firstImgWidth - positionDiff;

    if(carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
        return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
    // if user is scrolling to the left
    carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;

const dragStart = (e) => {
    // updatating global variables value on mouse down event
    isDragStart = true;
    prevPageX = e.pageX || e.touches[0].pageX;
    prevScrollLeft = carousel.scrollLeft;

const dragging = (e) => {
    // scrolling images/carousel to left according to mouse pointer
    if(!isDragStart) return;
    isDragging = true;
    positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
    carousel.scrollLeft = prevScrollLeft - positionDiff;

const dragStop = () => {
    isDragStart = false;

    if(!isDragging) return;
    isDragging = false;

carousel.addEventListener("mousedown", dragStart);
carousel.addEventListener("touchstart", dragStart);

document.addEventListener("mousemove", dragging);
carousel.addEventListener("touchmove", dragging);

document.addEventListener("mouseup", dragStop);
carousel.addEventListener("touchend", dragStop);

That’s all, now you’ve successfully created a Draggable Image Slider in HTML CSS & JavaScript. If your code doesn’t work or you’ve faced any problems, please download the source code files from the given download button. It’s free and a zip file will be downloaded that contains the project folder with source code files and images.

Post a Comment

Previous Post Next Post