Как убрать обновление страницы при нажатии кнопок JS HTML

Рейтинг: 0Ответов: 1Опубликовано: 10.02.2023

При нажатии кнопок "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>

Ответы

▲ 0Принят

Необходимо отменить стандартное поведение ссылок <a>. Для этого в обработчик события надо вызвать метод у события preventDefault().

btnNext.addEventListener("click", function (e) {
    e.preventDefault();
    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 (e) {
    e.preventDefault();
    viewSliders[viewSlide].style.backgroundColor = "transparent";
    if (viewSlide > 0) {
        viewSlide--;
    } else {
        viewSlide = 4;
    }
    viewSliders[viewSlide].style.backgroundColor = "black";
    slider.style.left = -viewSlide * viewport + "px";
});

Обратите внимание, что в обработчик события, необходимо передавать само событие, поэтому function () было изменено на function (e)