JSFiddle - React, Tailwind, and code Playground

by Roko

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">
          <div class="slide"><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="slide"><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="slide"><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="slide"><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="slide"><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>
        <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

* { margin: 0; box-sizing: border-box; }

.scroll-container {
    display: flex;
    overflow: hidden;
    height: auto;
    scroll-behavior: smooth;
}

.slide {
    flex: 0 0 100%;
    width: 100%;
}

div.scroll-container img {
    display: block;
    padding: 0.5rem;
    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;
}

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

JavaScript

let scrollInterval;
const cont = document.getElementById('scroll-container');
const imageWidth = cont.children[0].clientWidth;
console.log(imageWidth)
function scrollItems(direction) {
    if (direction === 'left') {

        if (cont.scrollLeft === 0) {
            cont.scrollLeft = cont.scrollWidth - cont.clientWidth;
        } else {
            cont.scrollLeft -= imageWidth;
        }
    } else if (direction === 'right') {
console.log(cont.scrollLeft, cont.scrollWidth)
        if (cont.scrollLeft >= cont.scrollWidth - imageWidth) {
            cont.scrollLeft = 0;
        } else {
            cont.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(cont.scrollLeft / imageWidth);

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

cont.addEventListener('scroll', updateActiveDot);

updateActiveDot();