Как убрать обновление страницы при нажатии кнопок JS HTML
При нажатии кнопок "prev" и "next" меняются слайды на экране, при этом просматривается эффект, как будто страница обновляется, и получается так, что страница поднимается вверх. Возможно как-то избавиться от этого эффекта?
let viewport = document.getElementById("viewport").offsetWidth;
let btnNext = document.getElementById("next");
let btnPrev = document.getElementById("prev");
let slider = document.querySelector("div.slider");
let viewSliders = document.querySelectorAll(".viewSlide");
let viewSlide = 0;
viewSliders[0].style.backgroundColor = "black";
btnNext.addEventListener("click", function () {
viewSliders[viewSlide].style.backgroundColor = "transparent";
if (viewSlide < 4) {
viewSlide++;
} else {
viewSlide = 0;
}
viewSliders[viewSlide].style.backgroundColor = "black";
slider.style.left = -viewSlide * viewport + "px";
});
btnPrev.addEventListener("click", function () {
viewSliders[viewSlide].style.backgroundColor = "transparent";
if (viewSlide > 0) {
viewSlide--;
} else {
viewSlide = 4;
}
viewSliders[viewSlide].style.backgroundColor = "black";
slider.style.left = -viewSlide * viewport + "px";
});
.main-slider{
display: grid;
grid-column-gap: 2rem;
grid-row-gap: 0;
grid-template-rows:
[offer] 1fr
[buttons] 200px
[about] 618px
[sliders] 113px
[text] 50px
[socials] 1fr;
grid-template-columns:
[left-gutter] 1fr
[one] 2fr
[two] 3fr
[three] 2fr
[four] 5fr
[right-gutter] 1fr ;
justify-items: center;
}
div.buttons-slider{
grid-column-start: 2;
grid-column-end: 6;
text-align: center;
justify-content: space-evenly;
}
div.buttons-slider > a{
height: 20px;
width: 45px;
}
.prev{
color: black;
font-family: Montserrat, serif;
font-weight: 300;
font-size: 18px;
height: 20px;
width: 50px;
border: none;
background-color: transparent;
cursor: pointer;
}
.next{
color: black;
font-family: Montserrat, serif;
font-weight: 300;
font-size: 18px;
height: 20px;
width: 50px;
border: none;
background-color: transparent;
cursor: pointer;
}
#viewport{
width: 952px;
height: 618px;
grid-column-start: 2;
grid-column-end: 6;
overflow: hidden;
}
.slider{
position: relative;
transition: 500ms;
width: calc(952px * 5);
height: 618px;
display: flex;
justify-content: start;
flex-wrap: nowrap;
}
.slide{
width: 952px;
height: 618px;
}
.slide img{
width: 952px;
height: 618px;
object-fit: cover;
object-position: 0;
}
#viewSlider{
width: calc(25px * 5);
display: flex;
grid-column-start: 4;
grid-row-start: 4;
align-items: center;
justify-content: space-between;
}
.viewSlide{
width: 15px;
height: 15px;
background-color: transparent;
border-radius: 15px;
border: 1px solid black;
}
<div class="main-slider">
<div class="buttons-slider">
<a href="#"><button class="prev" id="prev">prev</button></a>
<a href="#"><button class="next" id="next">next</button></a>
</div>
<div id="viewport">
<div class="slider" style="left: 0">
<div class="slide"><img src="Images-work/1.png" alt=""></div>
<div class="slide"><img src="Images-work/2.png" alt=""></div>
<div class="slide"><img src="Images-work/3.png" alt=""></div>
<div class="slide"><img src="Images-work/4.png" alt=""></div>
<div class="slide"><img src="Images-work/5.png" alt=""></div>
</div>
</div>
<div id="viewSlider">
<div class="viewSlide"></div>
<div class="viewSlide"></div>
<div class="viewSlide"></div>
<div class="viewSlide"></div>
<div class="viewSlide"></div>
</div>
</div>
<script src="slider.js"></script>
Источник: Stack Overflow на русском