@test-cats

Как скрыть кнопку, когда слайды заканчиваются?

Написал небольшой слайдер в учебных целях. Подскажите, как мне сделать так, чтобы когда слайды заканчивались в слайдере, то на экране пропадала кнопка прокрутки вправо, а когда слайдер только загружался и или когда пользователь возвращался в начальное положение, то пропадала кнопка слева?

<div class="slider">
        <div class="slider__list">
            <img src="img/cat.png" alt="Картинка 1">
            <img src="img/cat2.png" alt="Картинка 2">
            <img src="img/fish.png" alt="Картинка 3">
            <img src="img/fish2.png" alt="Картинка 4">
            <img src="img/fish2.png" alt="Картинка 5">
            <img src="img/fish2.png" alt="Картинка 5">
        </div>
    </div>


.slider {
    width: 384px;
    height: 128px;
    border: solid 5px black;
    margin: 50px auto;
    overflow: hidden;
}

.slider__list {
    width: 768px;
    position: relative;
    left: 0;
    transition: all ease .5s; 
}

.slider__list img {
    float: left;
}

.slider__list::after {
    content: '';
    display: block;
    clear: both;
}


let leftBtn = document.querySelector('.slider-left');
let rightBtn = document.querySelector('.slider-right');
let imgWidth = document.querySelector('.slider .slider__list img');
let sliderList = document.querySelector('.slider__list');
let left = 0;

sliderList.style.left = 0;

function sliderRight() {
    left = left - (imgWidth.offsetWidth * 3);
    if (left <= -sliderList.offsetWidth) {
        rightBtn.style = 'display: none;'
    }
    sliderList.style.left = left + 'px';
}

function sliderLeft() {
    left = left + (imgWidth.offsetWidth * 3);
    if (left > 0) {
        left = 0;
        // leftBtn.style = "display: flex;"
    }
    if (left > -sliderList.offsetWidth) {
        rightBtn.style = 'display: flex;';
    }
    sliderList.style.left = left + 'px';
}

if (imgWidth.offsetWidth < 0) {
    leftBtn.style = 'display = block;';
} else {
    leftBtn.style = 'display = none;'
}

leftBtn.onclick = sliderLeft;
rightBtn.onclick = sliderRight;
  • Вопрос задан
  • 303 просмотра
Пригласить эксперта
Ответы на вопрос 1
Legalas61
@Legalas61
Студент
Если текущий слайдер == первому, то дисплей none,
Если текущий слайд == slaids.length, то дисплей none - так уберешь последнюю кнопку
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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