Sneakers Page

Community feedback

• 

  y4rb0w•260

  @YavanhaPosted about 2 years ago

  Hello

  Good job! It's very good.

  For the JS part, don't worry, it will come.

  I've noticed something though, you are doing a long job to change the image in the carousel.

  From what I've seen, you're using a loop to get the right index for the image to display.

  Here is a much simpler solution:

  for the next image, it will look something like:

  let currentImage = 0 // as global var
  const images = [
      "images/image-product-1.jpg",
      "images/image-product-2.jpg",
      "images/image-product-3.jpg",
      "images/image-product-4.jpg",
  ]
  
  
  
  const next(eltHtml) {
    currentImage = (currentImage + 1) % images.length ;
    eltHTML = images[currentImage]
  }
  
  const prev(eltHtml) {
      if (currentImage === 0) {
          currentImage = images.length ;
      }
      currentImage = (currentImage - 1) % images.length ;
       eltHTML = images[currentImage]
  }
  

  It's simple to understand, if you look closely, I simply add 1 or remove 1 and then the % images.length part handles the edge.

  currentImage being 0, next will provide (0 + 1 % 4) = 1

  currentImage being 3 (last item) next will provide ( 3+ 1 % 4) = 0

  there is just a particular case with the prev you need to handle the negative part with this :

      if (currentImage === 0) {
          currentImage = images.length ;
      }
  

  That's it,

  Hoppefully it helps a bit (sorry for the english)

  Marked as helpful

  1