I'm trying to build a carousel with 3 images, but I don't know why when I press the "next" button It goes on the top of the website Instead of changing the image. I will post here a code snippet, maybe I'm missing something small but I'm staring at the code for 2 hours.

The code with "dots" I don't use anymore, please ignore It.

var slideIndex = 1;
let next = document.querySelector('.next');
let prev = document.querySelector('.prev');

showSlides(slideIndex);
next.addEventListener('click', plusSlides(1))
next.addEventListener('click', plusSlides(-1))
// Next/previous controls
function plusSlides(n) {
    showSlides(slideIndex += n);
}

// Thumbnail image controls
function currentSlide(n) {
    showSlides(slideIndex = n);
}

function showSlides(n) {
    var i;
    var slides = document.getElementsByClassName("product");
    //   var dots = document.getElementsByClassName("dot");
    if (n > slides.length) {
        slideIndex = 1
    }
    if (n < 1) {
        slideIndex = 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[slideIndex - 1].style.display = "block";
    //   dots[slideIndex-1].className += " active";
}
#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 .3s;
  transition: all ease-in .3s;
}

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

#section-one .categories li a {
  display: inline-block;
  font-size: .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 .product {
  display: none;
}

#section-one .slideshow-container .product .img {
  background: url("https://helpx.adobe.com/in/stock/how-to/visual-reverse-image-search/_jcr_content/main-pars/image.img.jpg/visual-reverse-image-search-v2_1000x560.jpg") no-repeat center center/cover;
  height: 1000px;
}

#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 class="slideshow-container">
        <div class="product">
          <p class="description"></p>
          <div class="img"></div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img"></div>
          <a href="#">WIEW MORE</a>
        </div>
        <div class="product">
          <p class="description"></p>
          <div class="img"></div>
          <a href="#">WIEW MORE</a>
        </div>
        <a href="#" class="prev"></a>
        <a href="#" class="next"></a>
      </div>
    </section>

3 Answers

1
Narkhede Tushar On Best Solutions

You need to replace href="#" with href="javascript:void(0);" as '#' used with href to allow scrolling, if you '#id' you will redirect to id='id' element and when you don't provide id it goes to the top of the webpage.

1
Chinh Nguyen On

Replace with < a href="#"> WIEW MORE < /a> ===> < a href="javascript:void(0)"> WIEW MORE < /a> or remove href in tag a, javascript:void(0) is am JavaScript action, but it's not event, you can add the id or class and then perform the action you want.

1
Israel Obanijesu On

Apart from the answer(s) already provided, you can also prevent this from happening by completely removing href attribute from your link. Another way is to add a callback function to your event listener and make use of event.preventDefault();.

Something like this: next.addEventListener('click', (event) => { event.preventDefault(); plusSlides(1); });