0

Выполняю задание слайдера на Скилфэктори (вдруг кто сталкивался). Задание заключается в том, чтобы при переключении слайдера (фото 1, 2, 3) выполнялось и переключение навигации вверху (соответствует № фото: например, фото 2 должно появляться при нажатии Sochi, Thieves).

Стрелками фото переключаются, а верхней навигацией нет.

Помогите, пожалуйста, разобраться, что не так введите сюда описание изображения

Код в HTML:

<div class="navigacia">
                        <nav class="nav2">
                            <ul class="ul2 dots-wrapper">
                                <li class="li2 dot active"> <a class="a2" href="##"> Rostov-on-Don, Admiral</a></li>
                                <li class="li2 dot active"> <a class="a2" href="##"> Sochi, Thieves</a></li>
                                <li class="li2 dot active"> <a class="a2" href="##"> Rostov-on-Don, Patriotic</a></li>
                            </ul>
                        </nav>
                    </div>

                    <section class="slider">
                        <div class="slider_images">
                            <div class="slider_line" >
                                <img src="IMG/2.png" alt="ROSTOV-ON-DON, ADMIRAL">
                                <img src="IMG/2.2.png" alt="SOCHI, THIEVES">
                                <img src="IMG/2.3.png" alt="ROSTOV-ON-DON, PATRIOTIC">
                            </div>
                        </div>
                        <div class="slider_arrows">
                            <div class="slider_arrows left">&larr;</div>
                            <div class="slider_arrows right">&rarr;</div>
                        </div>
                    </section>

И JS:

function sliderFoto() {

    let offset = 0;
    let sliderLine = document.querySelector('.slider_line');


    document.querySelector('.right').addEventListener('click', function(){
        offset = offset + 679;
        if (offset > 1358) {
            offset = 0;
            dotIndex ++
        }
        dotIndex = 0;
        sliderLine.style.left = -offset + 'px';
        thisSlide(dotIndex);
    });

    document.querySelector('.left').addEventListener('click', function(){
        offset = offset - 679;
        if (offset < 0) {
            offset = 1358;
            dotIndex --
        }
        dotIndex = offset - 679;
        sliderLine.style.left = -offset + 'px';
        thisSlide(dotIndex);
    });

    let dots = document.querySelectorAll('.dot');
    let dotIndex = 0;

    dots.forEach(callbackfn, (index) => {
        dot.addEventListener('click', () => {
            offset = 679 * index;
            sliderLine.style.left = -offset + 'px';
            dotIndex = index;
            thisSlide(dotIndex);
        })
    })

    let thisSlide = (index) => {
        for (let dot of dots) {
            dot.classList.remove('active');
        }
        dots[index].classList.add('active')
    }
};

sliderFoto();
2
  • у вас ошибка в строке - dot.addEventListener('click', () => { - не dot, а dots 24 мар 2023 в 7:04
  • Изменила, но все равно не работает
    – Jul
    24 мар 2023 в 13:56

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.