My function for displayin the images in a carousel has an extra blank image

//get the object
let slideshowContainer = document.getElementById('slideshow-container');



//get the buttons
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');
//create an index
var slideIndex = 0;

function showSlides(n) {
    const slides = document.getElementsByClassName('product');
    for (var i = 0; i < slides.length; i++) {
        slides[i].style.display = 'none';
    }
    if (n < 0) {
        slideIndex = slides.length
    }
    if (n > slides.length) {
        slideIndex = 0
    }
    slides[slideIndex].style.display = 'block';
    slideIndex = n;
}

function incrementSlides(n) {
    showSlides(slideIndex += n)
}

//add event listeners
next.addEventListener('click', function () {
    incrementSlides(1);
})
prev.addEventListener('click', function () {
    incrementSlides(-1);
})

showSlides(slideIndex);

#section-one .categories {
  height: 80px;
  background: rgba(0, 0, 0, 0.9);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#section-one .categories li {
  background: -webkit-gradient(linear, left top, right top, from(#0d0d0d), to(#202020));
  background: linear-gradient(to right, #0d0d0d, #202020);
  height: inherit;
  width: 12.5%;
  border-left: 1px solid black;
  -webkit-transition: all ease-in 0.3s;
  transition: all ease-in 0.3s;
}

#section-one .categories li:hover {
  background: green;
}

#section-one .categories li a {
  display: inline-block;
  font-size: 0.95rem;
  height: inherit;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

#section-one .slideshow-container {
  height: 1000px;
  margin: auto;
  position: relative;
  background: grey;
}

#section-one .slideshow-container .prev,
#section-one .slideshow-container .next {
  top: 50%;
  background: blue;
  font-size: 18px;
  border-radius: 0 3px 3px 0;
  width: auto;
  position: absolute;
  padding: 16px;
}

#section-one .slideshow-container .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

#section-one .slideshow-container .prev:hover,
#section-one .slideshow-container .next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

   <!-- Section-one -->
    <section id="section-one">
      <ul class="categories">
        <li><a href="#">HEADPHONES</a></li>
        <li><a href="#">EARPHONES</a></li>
        <li><a href="#">BLUETOOTH</a></li>
        <li><a href="#">WATERPROOF</a></li>
        <li><a href="#">SPORTS</a></li>
        <li><a href="#">METALLIC</a></li>
        <li><a href="#">WOODEN/BAMBOO</a></li>
        <li><a href="#">EARMUFF</a></li>
      </ul>
      <div id="slideshow-container">
        <div class="product">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://i.pinimg.com/originals/5a/e5/8f/5ae58f5036997cfd4636917403c3c951.jpg"
              alt="image1"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://images.unsplash.com/photo-1500382017468-9049fed747ef?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80"
              alt="image2"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img">
            <img
              src="https://cdn.pixabay.com/photo/2017/02/22/20/02/landscape-2090495_960_720.jpg"
              alt="image3"
              style="width:100%"
            />
          </div>
          <a href="#">WIEW MORE</a>
        </div>
        <a href="javascript:void(0);" class="prev"></a>
        <a href="javascript:void(0);" class="next"></a>
      </div>
    </section>

I'm trying to build a page with an image slider. I watched some youtube videos, I combined the code and tried to make something to work but I came across an error. When I change for next or prev image I get a blank page and I don't know why. I will create a code snippet to show you. I do not want just the problem to be solved but also the explanation, please! Cheers!!!

Solution

Here's the working jsFiddle with a few fix on your code: https://jsfiddle.net/0mrpbv6c/

Basically, I added some text to your a links to be able to click on them

<a href="javascript:void(0);" class="prev">PREV</a>
<a href="javascript:void(0);" class="next">NEXT</a>

I fixed your 2 if conditions inshowSlides to continue the carousel as expected. Here you forgot the - 1, as your slides start from 0

if (n < 0) {
  slideIndex = slides.length - 1;
}
if (n > slides.length - 1) {
  slideIndex = 0;
}

I removed the following instruction, as you don't want to update slideIndex from n because it's already being updated when calling showSlides in incrementSlides, and also it overwrites the value you possibly got from the 2 if.

slideIndex = n;