Responsive e-commerce product page using SCSS/HTML/JS

Community feedback

• 

  Amos Machora•330

  @AmohPrincePosted over 2 years ago

  Hey @Elicanto. Your cart has some form of cool transition sliding effect when it comes to view. how did you do that?

  0
• 

  sudarshan hosalli•510

  @sudarshan161219Posted over 2 years ago

  hey cheers for completing the challange 🎉

  layout looks good just little bit of padding and margin adjustment 👌

  for image carousel / image slider here is my solution👇

  HTML

  <aside class="slider"> <div class="slider-container"> <div class="slide"> <img class="product-img product-img-1" src="images/image-product-1.jpg" alt="product-img"> </div> <div class="slide"> <img class="product-img product-img-2" src="images/image-product-2.jpg" alt="product-img"> </div> <div class="slide"> <img class="product-img product-img-3" src="images/image-product-3.jpg" alt="product-img"> </div> <div class="slide"> <img class="product-img product-img-4" src="images/image-product-4.jpg" alt="product-img"> </div> </div> <div class="next-prev-desktop"> <div> <img class="previous-desktop" src="images/icon-previous.svg" alt="previous"> </div> <div> <img class="next-desktop" src="images/icon-next.svg" alt="next"> </div> </div> </aside>

  CSS

  .slider { position: absolute; right: 0; left: 0;

  }

  .slider-container { width: 100%; margin: 0 auto; /* height: 40vh; */ min-height: 280px; max-width: 80rem; position: relative; overflow: hidden; }

  .slide { position: absolute; width: 100%; height: 100%; display: grid; place-items: center; transition: all 0.25s ease-in-out; text-align: center; }

  JavaScript const productThumbnail = document.querySelectorAll('.product-thumbnail');

  const slides = document.querySelectorAll('.slide');

  const nextBtn = document.querySelectorAll('.next');

  const prevBtn = document.querySelectorAll('.previous');

  slides.forEach(function (slide, index) { slide.style.left = ${index * 100}%; });

  let counter = 0;

  nextBtn.forEach(function (next) { next.addEventListener("click", function () { counter++; carousel(); }); });

  prevBtn.forEach(function (previous) { previous.addEventListener("click", function () { counter--; carousel(); }); });

  function carousel() { if (counter === slides.length) { counter = 0; } if (counter < 0) { counter = slides.length - 1; }

  slides.forEach(function (slide) { slide.style.transform = translateX(-${counter * 100}%) }); }

  happy coding

  0