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

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 >
  <h2>Featured Watches - <a href="#">View all</a></h2>
</div>
<div >
  <div >
    <div >
      <img src="/images/rolex-panda.png" alt="Watch 1">
      <p >Rolex Panda</p>
    </div>
    <div >
      <img src="/images/ap-1.png" alt="Watch 2">
      <p >AP Royal Oak Offshore</p>
    </div>
    <div >
      <img src="/images/patek-1.png" alt="Watch 3">
      <p >Patek Phillipe</p>
    </div>
    <div >
      <img src="/images/patek-1.png" alt="Watch 3">
      <p >Patek Phillipe</p>
    </div>
    <div >
      <img src="/images/patek-1.png" alt="Watch 3">
      <p >Patek Phillipe</p>
    </div>
    <div >
      <img src="/images/patek-1.png" alt="Watch 3">
      <p >Patek Phillipe</p>
    </div>
    <div >
      <img src="/images/patek-1.png" alt="Watch 3">
      <p >Patek Phillipe</p>
    </div>
  </div>

  <div ></div>
  <div >
    <button >
                <i ></i>
            </button>
    <button >
                <i ></i>
            </button>
  </div>
</div>
<!-- End of Watch Reel -->

CodePudding user response：

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!