'carousel only with pure javascript - cannot figure out some things

I have a really important project to present next week and I cannot seem to figure out how to do a simple carousel with js and css. I have always used bootstrap for this and now I am not allowed to do so. mock up image So I have to follow this image.

My problems are: 1. I don't know how to show in the carousel only 3 images per click 2. to restart the carousel from the beginning after the last 3 images 3. to make those little 3 dots functional

Here is the code

const productContainer = [...document.querySelectorAll(".product-container")];
const nextBtn = [...document.querySelectorAll(".next-btn")];
const dots = [...document.getElementsByClassName("dot")];

productContainer.forEach((item, i) => {
  let containerDimension = item.getBoundingClientRect();
  let containerWidth = containerDimension.width;

  nextBtn[i].addEventListener("click", () => {
    item.scrollLeft += containerWidth;
  });
});

function currentSlide(n) {
  var i;
  const slides = document.getElementsByClassName("product-thumb");
  const dots = document.getElementsByClassName("dot");
  if (n > slides.length) {
    n = 1;
  } else if (n < 1) {
    n = slides.length;
  }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }

  slides[n - 1].style.display = "block";
  dots[n - 1].className += " active";
}
0;

.carousel {
  position: relative;
  overflow: hidden;
  padding: 20px;
}

.carousel-title {
  padding-top: 18px;
  padding-bottom: 25px;
  text-align: center;
}

.product-container {
  padding: 0 6vw;
  display: flex;
  justify-content: flex-start;
  overflow-x: auto;
  scroll-behavior: smooth;
}

.product-container::-webkit-scrollbar {
  display: none;
}

.product-card {
  flex: 0 0 auto;
  width: 250px;
  height: 300px;
  margin-right: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-image {
  position: relative;
  width: 100%;
  height: 70%;
  overflow: hidden;
}

.product-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-info {
  width: 100%;
  text-align: center;
}

.product-name,
.product-price {
  font-weight: 700;
  font-size: 20px;
}

.cart-btn {
  display: block;
  background-color: var(--black);
  color: var(--white);
  font-weight: 600;
  width: 120px;
  padding: 2px;
  border-radius: 5px;
  margin-left: 60px;
  margin-top: 5px;
}

.next-btn {
  border: none;
  height: 100%;
  width: 10vw;
  background-color: var(--white);
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  z-index: 10;
}

.dots {
  padding-top: 25px;
  padding-bottom: 10px;
  display: flex;
  justify-content: center;
}

.dot {
  width: 6px;
  height: 6px;
  margin: 0 5px;
  background-color: var(--black);
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
  cursor: pointer;
}

.active {
  background-color: #717171;
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div class="carousel">
      <h1 class="carousel-title">Most Popular products</h1>
      <button class="next-btn">
        <img src="https://i.postimg.cc/gcywBTn1/arrow.png" alt="" />
      </button>
      <div class="product-container">
        <div class="product-card">
          <div class="product-image">
            <img
              src="https://i1.wp.com/uk.blog.smartbuyglasses.com/files/2017/05/FI_opt.jpg?resize=850%2C567"
              class="product-thumb"
              alt=""
            />
          </div>
          <div class="product-info">
            <h2 class="product-name">Orange aviators</h2>
            <p class="product-price">£35</p>
            <button class="cart-btn">Add to cart</button>
          </div>
        </div>
        <div class="product-card">
          <div class="product-image">
            <img
              src="https://images.asos-media.com/products/asos-design-recycled-frame-aviator-sunglasses-in-tort-with-blue-lens/201303182-3?$n_960w$&wid=952&fit=constrain"
              class="product-thumb"
              alt=""
            />
          </div>
          <div class="product-info">
            <h2 class="product-name">Light blue lenses</h2>
            <p class="product-price">£65</p>
            <button class="cart-btn">Add to cart</button>
          </div>
        </div>
        <div class="product-card">
          <div class="product-image">
            <img
              src="https://i.ebayimg.com/images/g/YZMAAOSwSgFeQakk/s-l640.jpg"
              class="product-thumb"
              alt=""
            />
          </div>
          <div class="product-info">
            <h2 class="product-name">Blue aviators</h2>
            <p class="product-price">£150</p>
            <button class="cart-btn">Add to cart</button>
          </div>
        </div>
        <div class="product-card">
          <div class="product-image">
            <img
              src="https://media.gq-magazine.co.uk/photos/60a2733372e426530a83d108/master/w_1600,c_limit/Aviators_0004_Rayban%20RB3689.jpg"
              class="product-thumb"
              alt=""
            />
          </div>
          <div class="product-info">
            <h2 class="product-name">USA aviators</h2>
            <p class="product-price">£271</p>
            <button class="cart-btn">Add to cart</button>
          </div>
        </div>
        <div class="product-card">
          <div class="product-image">
            <img
              src="https://media.gq-magazine.co.uk/photos/6225e49d5bce76f48b262a51/master/w_1600,c_limit/Aviators_0003_Asos.jpg"
              class="product-thumb"
              alt=""
            />
          </div>
          <div class="product-info">
            <h2 class="product-name">Brown aviators</h2>
            <p class="product-price">£135</p>
            <button class="cart-btn">Add to cart</button>
          </div>
        </div>
        <div class="product-card">
          <div class="product-image">
            <img
              src="https://media.gq-magazine.co.uk/photos/6225e4a0bb4ae27538e8d4c9/master/w_1600,c_limit/Aviators_0002_Superdry.jpg"
              class="product-thumb"
              alt=""
            />
          </div>
          <div class="product-info">
            <h2 class="product-name">Rainbow aviators</h2>
            <p class="product-price">£80</p>
            <button class="cart-btn">Add to cart</button>
          </div>
        </div>
        <div class="product-card">
          <div class="product-image">
            <img
              src="https://media.gq-magazine.co.uk/photos/6225e4a8f2e710dc5df36eda/master/w_1600,c_limit/Aviators_0000_SUNGLASSES%20HUT.jpg"
              class="product-thumb"
              alt=""
            />
          </div>
          <div class="product-info">
            <h2 class="product-name">Green aviators</h2>
            <p class="product-price">£235</p>
            <button class="cart-btn">Add to cart</button>
          </div>
        </div>
        <div class="product-card">
          <div class="product-image">
            <img
              src="https://media.gq-magazine.co.uk/photos/60a27333f965fa19defcba9a/master/w_1600,c_limit/Aviators_0002_Rayban%20RB3689%20SOLID%20EVOLVE.jpg"
              class="product-thumb"
              alt=""
            />
          </div>
          <div class="product-info">
            <h2 class="product-name">Clear luxury aviators</h2>
            <p class="product-price">£235</p>
            <button class="cart-btn">Add to cart</button>
          </div>
        </div>
        <div class="product-card">
          <div class="product-image">
            <img
              src="https://media.gq-magazine.co.uk/photos/60a27334c6aa32a852025ce4/master/w_1600,c_limit/Aviators_0007_Oliver%20peoples.jpg"
              class="product-thumb"
              alt=""
            />
          </div>
          <div class="product-info">
            <h2 class="product-name">Black luxury aviators</h2>
            <p class="product-price">£28005</p>
            <button class="cart-btn">Add to cart</button>
          </div>
        </div>
      </div>
      <div class="dots">
        <span class="dot" onclick="currentSlide(1)"></span>
        <span class="dot" onclick="currentSlide(2)"></span>
        <span class="dot" onclick="currentSlide(3)"></span>
      </div>
    </div>
    <script src="/script.js"></script>
</body>
</html>

Thanks a lot for your time and sorry if this seems to simple but I am just a beginner.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'carousel only with pure javascript - cannot figure out some things

Sources

Related Questions