At a road block with scroll section for my featured items on site

Question

On my site I have a scroll section that will display watches and allow you to scroll on the section similar to what rolex does on their homepage. I created div container for the section and added a wrapper container that I was using to control the items. I also was trying to add arrows that can be used as an option to scroll just like how rolex does on theirs. Nothing is working. The items are there but the functionality isnt. Take a look at Rolex website and scroll down to their watches section on the home page. I want to do exactly that.

I tried adding JavaScript to make it functional but that did nothing for me. I even added a console.log() to see if anything would print in the browser console and got nothing. Please help.

 // Select the left and right arrow buttons const leftButton = document.querySelector('.arrow-button.left'); const rightButton = document.querySelector('.arrow-button.right'); // Select the watch items wrapper element const watchItemsWrapper = document.querySelector('.watch-items-wrapper'); // Scroll the watch items wrapper element to the left or right when the arrow buttons are clicked leftButton.addEventListener('click', () => { watchItemsWrapper.scrollBy({ left: watchItemsWrapper.scrollLeft - 200, // Scroll 200 pixels to the left behavior: 'smooth' // Use a smooth scroll transition }); }); rightButton.addEventListener('click', () => { watchItemsWrapper.scrollBy({ left: watchItemsWrapper.scrollLeft + 200, // Scroll 200 pixels to the right behavior: 'smooth' // Use a smooth scroll transition }); });

 /* Watch Reel Section */.watch-reel-container { display: flex; position: relative; flex-wrap: nowrap; overflow: scroll; scroll-behavior: smooth; margin-left: 230px; }.watch-items-wrapper { display: flex; flex-wrap: nowrap; }.watch-reel-item { flex: 0 0 200px; padding: 20px; cursor: pointer; }.watch-reel-container img { width: 400px; height: 400px; object-fit: cover; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }.watch-name { margin-top: 10px; font-size: 18px; font-weight: bold; text-align: center; color: #333; text-transform: uppercase; }.watch-reel-h2 { margin-top: 150px; margin-left: 250px; }.watch-reel-h2 a { text-decoration: none; color: #375ea1; }.watch-reel-h2 a:hover { opacity: 70%; }.scroll-bar { position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: #ccc; border-radius: 4px; }.arrow-container { position: absolute; top: 50%; transform: translateY(-100%); display: flex; justify-content: space-between; width: 100%; }.arrow-button { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background-color: black; color: white; font-size: 20px; cursor: pointer; }.arrow-button::before { left: 0; content: '>'; }.arrow-button.left::before { right: 0; content: '<'; }.arrow-button:hover { background: #333; cursor: pointer; }

 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" /> <.-- Beginning of Watch Reel --> <div class="watch-reel-h2"> <h2>Featured Watches - <a href="#">View all</a></h2> </div> <div class="watch-reel-container"> <div class="watch-items-wrapper"> <div class="watch-reel-item"> <img src="/images/rolex-panda.png" alt="Watch 1"> <p class="watch-name">Rolex Panda</p> </div> <div class="watch-reel-item"> <img src="/images/ap-1.png" alt="Watch 2"> <p class="watch-name">AP Royal Oak Offshore</p> </div> <div class="watch-reel-item"> <img src="/images/patek-1.png" alt="Watch 3"> <p class="watch-name">Patek Phillipe</p> </div> <div class="watch-reel-item"> <img src="/images/patek-1.png" alt="Watch 3"> <p class="watch-name">Patek Phillipe</p> </div> <div class="watch-reel-item"> <img src="/images/patek-1.png" alt="Watch 3"> <p class="watch-name">Patek Phillipe</p> </div> <div class="watch-reel-item"> <img src="/images/patek-1.png" alt="Watch 3"> <p class="watch-name">Patek Phillipe</p> </div> <div class="watch-reel-item"> <img src="/images/patek-1.png" alt="Watch 3"> <p class="watch-name">Patek Phillipe</p> </div> </div> <div class="scroll-bar"></div> <div class="arrow-container"> <button class="arrow-button left"> <i class="fa fa-arrow-left"></i> </button> <button class="arrow-button right"> <i class="fa fa-arrow-right"></i> </button> </div> </div> <!-- End of Watch Reel -->

Answer 1

Add overflow: scroll to your .watch-items-wrapper :

.watch-items-wrapper {
  display: flex;
  flex-wrap: nowrap;
  overflow: scroll;
}

You can remove the overflow: scroll; from your .watch-reel-container , it's not needed. If you want the container to span full width then add overflow: hidden to your .watch-reel-container .

Next adjust both your scroll functions as such:

Left:

leftButton.addEventListener('click', () => {
  watchItemsWrapper.scrollBy({
    left: -200,
    behavior: 'smooth'
  });
});

Right:

rightButton.addEventListener('click', () => {
  watchItemsWrapper.scrollBy({
    left: 200,
    behavior: 'smooth'
  });
});

I think this will give you the functionality you're looking for.

If you'd like to hide the scrollbar but keep the functionality, check our this doc from w3schools.

I hope this helps!