Нормальный слайдер или что-то неправильно? Слайдер на чистом js

Question

Не знаю где ошибка может быть или как можно улучшить

const btnPrev = document.createElement('button');
btnPrev.setAttribute('class','slider__btn');
btnPrev.classList.add('slider__btn--prev');
btnPrev.innerHTML += "Prev slide";

const btnNext = document.createElement('button');
btnNext.setAttribute('class','slider__btn');
btnNext.classList.add('slider__btn--next');
btnNext.innerHTML += "Next slide";

let numberSlide = 1;    //поменять нужно
if(numberSlide === 1) {
    btnPrev.setAttribute('style','display:none;');
}
if(numberSlide === 3) {
    btnNext.setAttribute('style', 'display:none;');
}

let sliderImg = document.createElement('img');
let changeSlide = sliderImg.setAttribute('src','img/' + numberSlide + '.jpg');
sliderImg.setAttribute('class', 'slider__img');

const sliderItem = document.getElementById('slider');
sliderItem.appendChild(btnPrev);
sliderItem.appendChild(sliderImg);
sliderItem.appendChild(btnNext);

btnPrev.addEventListener('click', function(){
    numberSlide--;
    sliderImg.setAttribute('src','img/' + numberSlide + '.jpg');

    if(numberSlide === 1) {
        btnPrev.setAttribute('style','display:none;');
    }

    if(numberSlide < 3) {
        btnNext.setAttribute('style', 'display:block;');
    }
});

btnNext.addEventListener('click', function(){
    numberSlide++;
    sliderImg.setAttribute('src','img/' + numberSlide + '.jpg');

    if(numberSlide === 3) {
        btnNext.setAttribute('style', 'display:none;');
    }

    if(numberSlide > 1) {
        btnPrev.setAttribute('style', 'display:block;');
    }
});

.wrapper {
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.slider {
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 0 100px 0 100px;
    max-width: 400px;
}

.slider__btn {
    position: absolute;
}

.slider__btn--prev {
    left: 0;
}

.slider__btn--next {
    right: 0;
}

.slider__img {
    max-width: 400px;
    height: 400px;
    
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Homework 8 - slider</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="slider" id="slider">
        </div>
    </div>
    <script type="text/javascript" src="js/app.js"></script>
    <script type="text/javascript" src="js/function.js"></script>
</body>
</html>

БЛОГ НА HUSL

Нормальный слайдер или что-то неправильно? Слайдер на чистом js

Ответы (0 шт):