Home Auto scroll function shows a part of previous image on left with current image

Questions

Auto scroll function shows a part of previous image on left with current image

January 31, 2024

<!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>
    <style>
                .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;
        }

    </style>
  </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>
  <script>
            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();

  </script>

</html>

https://jsfiddle.net/Ds9999/3nk0zxg1/6/

I have been playing around in jsfiddle and I really cannot figure out why am I seeing a part of the remaining image on the left of the current image and the part of image increases gradually with each image scrolling towards right side.

Should I use jquery for this?

>Solution :

Create a DIV.slide wrapper for your images:

<div class="slide">
  <img src="some.image" alt="Cinque Terre">
</div>

Edit the CSS in order to use CSS flex instead of relying to textual whitespace nowrap stuff:

* { 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;
}

and here’s the relevant JS with the improved calculation:

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();

Example demo on jsFiddle.net