Написал небольшой слайдер в учебных целях. Подскажите, как мне сделать так, чтобы когда слайды заканчивались в слайдере, то на экране пропадала кнопка прокрутки вправо, а когда слайдер только загружался и или когда пользователь возвращался в начальное положение, то пропадала кнопка слева?
<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;