JSFiddle - React, Tailwind, and code Playground

by Ds9999

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Container</title>
  </head>

  <body>
    <div class="hz-scroll">
      <div class="images">
        <div class="scroll-container" id="scroll-container">
          <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
          <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
          <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
          <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
          <img src="https://bsmedia.business-standard.com/_media/bs/img/article/2023-11/26/full/1701018131-7486.jpg?im=FeatureCrop,size=(826,465)" alt="Cinque Terre">
        </div>
        <div class="dots-container" id="dots-container">
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
          <div class="dot"></div>
        </div>
      </div>
    </div>
  </body>

</html>

CSS

.scroll-container {
          overflow: hidden;
          white-space: nowrap;
          width: 100%;
          height: auto;
          scroll-behavior: smooth;
        }

        div.scroll-container img {
          padding: 0.5px;
          width: 100%;
          height: auto;
        }

        div.hz-scroll {
          position: relative;
        }

        .dots-container {
          display: flex;
          justify-content: left;
          margin-bottom: 1.2em;
        }

        .dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background-color: #ccc;
          margin: 0 5px;
          transition: background-color 0.3s ease-in-out;
        }

        .dot.active {
          background-color: #2d2d86;
          /* Highlight color */
        }

        .images {
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          gap: 2em;
        }

JavaScript

let scrollInterval;
        const firstimage_scrollContainer = document.getElementById('scroll-container');
        const imageWidth = firstimage_scrollContainer.querySelector('img').clientWidth;

        function scrollItems(direction) {
          if (direction === 'left') {

            if (firstimage_scrollContainer.scrollLeft === 0) {
              firstimage_scrollContainer.scrollLeft = firstimage_scrollContainer.scrollWidth - firstimage_scrollContainer.clientWidth;
            } else {
              firstimage_scrollContainer.scrollLeft -= imageWidth;
            }
          } else if (direction === 'right') {

            if (firstimage_scrollContainer.scrollLeft + firstimage_scrollContainer.clientWidth >= firstimage_scrollContainer.scrollWidth - imageWidth) {
              firstimage_scrollContainer.scrollLeft = 0;
            } else {
              firstimage_scrollContainer.scrollLeft += imageWidth;
            }
          }
        }


        function startAutoScroll() {
          scrollInterval = setInterval(function() {
            scrollItems('right');
          }, 2000); // Adjust the interval as needed (e.g., 3000 milliseconds for 3 seconds)
        }

        startAutoScroll();

        function updateActiveDot() {
          const dotsContainer = document.getElementById('dots-container');
          const dots = dotsContainer.querySelectorAll('.dot');
          const activeIndex = Math.round(firstimage_scrollContainer.scrollLeft / imageWidth);

          dots.forEach((dot, index) => {
            dot.classList.toggle('active', index === activeIndex);
          });
        }

        firstimage_scrollContainer.addEventListener('scroll', updateActiveDot);

updateActiveDot();