after I scroll to the last slide, then trying to scroll further, in the hope that it will return me to the first slide, but it scrolls further, where there is nothing. I have 2 blocks in the slider, each block has 3 cards. How to make the slider return to 1 slide after the slides have ended and also in the opposite direction, either blind or stupid, but I can't see anything, please help, I will be grateful

<div class="slider">
                    <button class="slider-prev"><img src="icons/halls/prev.svg" alt="prev"></button>
                    <div class="slider-wrapper">
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/russian.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">3 Человека</p>
                                <p class="slider-item__price">от 600 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Русская баня</div>
                            <div class="slider-item__subtitle">Русская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/turk.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">2 Человека</p>
                                <p class="slider-item__price">от 800 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Турецкий хаммам</div>
                            <div class="slider-item__subtitle">Хаммам</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/fin.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <div class="slider-item__value">
                                    <p class="slider-item__human">3 Человека</p>
                                    <p class="slider-item__price">от 700 руб</p>
                                </div>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Финская сауна</div>
                            <div class="slider-item__subtitle">Финская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    </div>
                    <div class="slider-wrapper">
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/fin.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <div class="slider-item__value">
                                    <p class="slider-item__human">3 Человека</p>
                                    <p class="slider-item__price">от 700 руб</p>
                                </div>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Финская сауна</div>
                            <div class="slider-item__subtitle">Финская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/turk.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">2 Человека</p>
                                <p class="slider-item__price">от 800 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Турецкий хаммам</div>
                            <div class="slider-item__subtitle">Хаммам</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    <div class="slider-item">
                        <div class="slider-item__wrapper">
                            <img src="img/halls/russian.png" alt="" class="slider-item__img">
                            <div class="slider-item__value">
                                <p class="slider-item__human">3 Человека</p>
                                <p class="slider-item__price">от 600 руб.</p>
                            </div>
                        </div>
                        <div class="slider-item__descr">
                            <div class="slider-item__title">Русская баня</div>
                            <div class="slider-item__subtitle">Русская</div>
                        </div>
                        <a href="#" class="slider-item__button">Подробнее</a>
                    </div>
                    </div>
                    <button class="slider-next"><img src="icons/halls/next.svg" alt="next"></button>
                </div>

'use strict';

window.addEventListener('DOMContentLoaded', () => {

// slider

const slides = document.querySelectorAll('.slider-wrapper');
const prev = document.querySelector('.slider-prev');
const next = document.querySelector('.slider-next');

let count = 0;

showSlides(0);

function showSlides(n) {
    if(n > slides.length){
        count = 0;
    }

    if(n < 0) {
        count = slides.length;
    }

    slides.forEach(item => {
        item.classList.add('hide');
    });

    slides[count].classList.remove('hide');

    
}

function plusSlides(n) {
    showSlides(count  = n);
}

prev.addEventListener('click', () => {
    plusSlides(-1);
});

next.addEventListener('click', () => {
    plusSlides(1);
});

});enter image description here

CodePudding user response：

Seems error is there.

if(n > slides.length){
     count = 0;
    }

if(n < 0) {
 count = slides.length;
}

Your counter starts from 0, but .length returns value from 1. Try to start count from 1 or change if condition to slides.length - 1 and count = slides.length - 1;