@thorny1231

Как сделать чтобы слайдер возращался к первому слайду?

Когда листаю слайды, долистываю до последнего, а при следующем клике он не возвращает к первому, а листает далее, тем самым показывая мне слайд, где ничего нет.

'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);
    });
});


<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>
  • Вопрос задан
  • 18 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы