Хотел сделать слайдер блоков, не могу понять почему JS выдаёт ошибки,

Question

Хотел сделать слайдер блоков, не могу понять почему JS выдаёт ошибки,

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

const sliderImages = document.querySelectorAll('slider-line-wrapper');
const sliderLine = document.querySelector('slider-line');
const sliderDots = document.querySelectorAll('slider-dot');

let sliderCount = 0,
    sliderWidth;

window.addEventListener('resize', showSlide);

function showSlide() {
    sliderWidth = document.querySelector('.slider').offsetWidth;
    sliderLine.style.width = sliderWidth * sliderImages.length + 'px';
    sliderImages.forEach(item => item.style.width = sliderWidth + 'px');

    rollSlider();
}
showSlide();

function nextSide(){
    sliderCount++;
    if (sliderCount >= sliderImages.length) sliderCount = 0;

    rollSlider();
    thisSlide(sliderCount);
}

function prevSide(){
    sliderCount--;
    if (sliderCount < 0) sliderCount = sliderImages.length -1;

    rollSlider();
    thisSlide(sliderCount);
}

function rollSlider(){
    sliderLine.style.transform =`translateX(${-sliderCount * sliderWidth}px)`;
}

function thisSlide(index){
    sliderDots.forEach(item => item.classList.remove('active-dot'));
    sliderDots[index].classList.add('active-dot');
}

sliderDots.forEach((dot, index) => {
        dot.addEventListener('click', {}=> {
        sliderCount = index;
        rollSlider();
        thisSlide(sliderCount);
    })
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="slider">
        <div class="slider-line">
            <div class="slider-line-wrapper">
                <img src="client-man.png" alt="" class="slider-img">
                <p class="title">they are simple great</p>
                <p class="text">There are many variations  majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing. There are many variations  majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing.</p>
                <p class="continue">they are simple great</p>
            </div>
            <div class="slider-line-wrapper">
                <img src="client-man.png" alt="" class="slider-img">
                <p class="title">they are simple great</p>
                <p class="text">There are many variations  majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing. There are many variations  majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing.</p>
                <p class="continue">they are simple great</p>
            </div>
            <div class="slider-line-wrapper">
                <img src="client-man.png" alt="" class="slider-img">
                <p class="title">they are simple great</p>
                <p class="text">There are many variations  majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing. There are many variations  majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing.</p>
                <p class="continue">they are simple great</p>
            </div>
            <div class="slider-line-wrapper">
                <img src="client-man.png" alt="" class="slider-img">
                <p class="title">they are simple great</p>
                <p class="text">There are many variations  majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing. There are many variations  majori have dum suffered alteration in that of a some form by injected dumm more a randomised the slightly believable. If you are believable. If you are passage of Lorem that Ipsum isn't most a important anything embarrassing.</p>
                <p class="continue">they are simple great</p>
            </div>
        </div>
        <div class="slider-wrapper">
            <div class="slider-dot active-dot"></div>
            <div class="slider-dot"></div>
            <div class="slider-dot"></div>
            <div class="slider-dot"></div>
        </div>
    </div>

    <script src="main.js"></script>
</body>
</html>

javascript html

Источник: Stack Overflow на русском

Хотел сделать слайдер блоков, не могу понять почему JS выдаёт ошибки,

Ответы