How to Create Smooth Image Slider using JavaScript

We'll create a sleek image slider using HTML, CSS, and JavaScript. Start by structuring your HTML with a container div and individual slides. Style them using CSS for a clean look. Utilize JavaScript to handle slide transitions and user interactions. Implement event listeners for smooth navigation between images. Keep the code modular for easy customization.

This is your HTML for Image Slider:

<!-- Container for the entire slider component -->
<div class="container">

  <!-- Wrapper for the image slider -->
  <div class="slider-wrapper">

    <!-- List of images displayed in the slider -->
    <ul class="image-list">
      <!-- Individual image items with source URLs and alt text -->
      <img class="image-item" src="https://try.siddharthkamra.in/example/image-1.jpg" alt="img-1" />
      <img class="image-item" src="https://try.siddharthkamra.in/example/image-2.jpg" alt="img-2" />
      <img class="image-item" src="https://try.siddharthkamra.in/example/image-3.jpg" alt="img-3" />
      <img class="image-item" src="https://try.siddharthkamra.in/example/image-4.jpg" alt="img-4" />
      <img class="image-item" src="https://try.siddharthkamra.in/example/image-5.jpg" alt="img-5" />
      <img class="image-item" src="https://try.siddharthkamra.in/example/image-6.jpg" alt="img-6" />
      <img class="image-item" src="https://try.siddharthkamra.in/example/image-7.jpg" alt="img-7" />
      <img class="image-item" src="https://try.siddharthkamra.in/example/image-8.jpg" alt="img-8" />
      <img class="image-item" src="https://try.siddharthkamra.in/example/image-9.jpg" alt="img-9" />
      <img class="image-item" src="https://try.siddharthkamra.in/example/image-10.jpg" alt="img-10" />
    </ul>

  </div>

  <!-- Container for the scrollbar -->
  <div class="slider-scrollbar">

    <!-- Track for the scrollbar -->
    <div class="scrollbar-track">

      <!-- Draggable thumb of the scrollbar -->
      <div class="scrollbar-thumb"></div>

    </div>

  </div>

</div>

This is your CSS for Image Slider:

/* Resetting default styles and setting a background color */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  background: #f1f4fd;
}

/* Styling the container for the slider */
.container {
  max-width: 1200px;
  width: 100%;
  padding: 5px;
  margin-top: 10px;
}

/* Styling the main wrapper for the slider */
.slider-wrapper {
  position: relative;
}

/* Styling the list of images in the slider */
.slider-wrapper .image-list {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 18px;
  font-size: 0;
  list-style: none;
  margin-bottom: 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

/* Hiding the scrollbar for better aesthetics */
.slider-wrapper .image-list::-webkit-scrollbar {
  display: none;
}

/* Styling individual images in the slider */
.slider-wrapper .image-list .image-item {
  width: 325px;
  height: 400px;
  object-fit: cover;
}

/* Styling the container for the scrollbar */
.container .slider-scrollbar {
  height: 24px;
  width: 100%;
  display: flex;
  align-items: center;
}

/* Styling the track of the scrollbar */
.slider-scrollbar .scrollbar-track {
  background: #ccc;
  width: 100%;
  height: 2px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  position: relative;
}

/* Adjusting scrollbar appearance on hover */
.slider-scrollbar:hover .scrollbar-track {
  height: 4px;
}

/* Styling the draggable thumb of the scrollbar */
.slider-scrollbar .scrollbar-thumb {
  position: absolute;
  background: #000;
  top: 0;
  bottom: 0;
  width: 50%;
  height: 100%;
  cursor: grab;
  border-radius: inherit;
}

/* Adjusting thumb appearance on click */
.slider-scrollbar .scrollbar-thumb:active {
  cursor: grabbing;
  height: 8px;
  top: -2px;
}

/* Adding a pseudo-element for better thumb appearance */
.slider-scrollbar .scrollbar-thumb::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  bottom: -10px;
}

This is your Responsive CSS for Image Slider:

/* Styles for mobile and tablets */
@media only screen and (max-width: 600px) {
  /* Adjusting styles for smaller screens */
  .slider-wrapper .image-list {
    gap: 10px;
    margin-bottom: 0px;
    scroll-snap-type: x mandatory;
  }

  /* Adjusting styles for individual images on smaller screens */
  .slider-wrapper .image-list .image-item {
    width: 280px;
    height: 380px;
  }

  /* Adjusting styles for the scrollbar thumb on smaller screens */
  .slider-scrollbar .scrollbar-thumb {
    width: 20%;
  }
}

This is your Javascript for Image Slider:

const initSlider = () => {
  const imageList = document.querySelector(".slider-wrapper .image-list");
  const slideButtons = document.querySelectorAll(".slider-wrapper .slide-button");
  const sliderScrollbar = document.querySelector(".container .slider-scrollbar");
  const scrollbarThumb = sliderScrollbar.querySelector(".scrollbar-thumb");
  const maxScrollLeft = imageList.scrollWidth - imageList.clientWidth;

  // Handle scrollbar thumb drag
  scrollbarThumb.addEventListener("mousedown", (e) => {
    const startX = e.clientX;
    const thumbPosition = scrollbarThumb.offsetLeft;
    const maxThumbPosition = sliderScrollbar.getBoundingClientRect().width - scrollbarThumb.offsetWidth;

    // Update thumb position on mouse move
    const handleMouseMove = (e) => {
      const deltaX = e.clientX - startX;
      const newThumbPosition = thumbPosition + deltaX;

      // Ensure the scrollbar thumb stays within bounds
      const boundedPosition = Math.max(0, Math.min(maxThumbPosition, newThumbPosition));
      const scrollPosition = (boundedPosition / maxThumbPosition) * maxScrollLeft;

      scrollbarThumb.style.left = `${boundedPosition}px`;
      imageList.scrollLeft = scrollPosition;
    }

    // Remove event listeners on mouse up
    const handleMouseUp = () => {
      document.removeEventListener("mousemove", handleMouseMove);
      document.removeEventListener("mouseup", handleMouseUp);
    }

    // Add event listeners for drag interaction
    document.addEventListener("mousemove", handleMouseMove);
    document.addEventListener("mouseup", handleMouseUp);
  });


  // Show or hide slide buttons based on scroll position
  const handleSlideButtons = () => {
    slideButtons[0].style.display = imageList.scrollLeft <= 0 ? "none" : "flex";
    slideButtons[1].style.display = imageList.scrollLeft >= maxScrollLeft ? "none" : "flex";
  }

  // Update scrollbar thumb position based on image scroll
  const updateScrollThumbPosition = () => {
    const scrollPosition = imageList.scrollLeft;
    const thumbPosition = (scrollPosition / maxScrollLeft) * (sliderScrollbar.clientWidth - scrollbarThumb.offsetWidth);
    scrollbarThumb.style.left = `${thumbPosition}px`;
  }

  // Call these two functions when image list scrolls
  imageList.addEventListener("scroll", () => {
    updateScrollThumbPosition();
    handleSlideButtons();
  });
}

window.addEventListener("resize", initSlider);
window.addEventListener("load", initSlider);

You've created responsive slider through HTML, CSS, and JavaScript. Feel free to experiment with styles, transitions, and functionality to make it uniquely yours. Keep coding, exploring, and refining your skills. Happy coding!