сделал свой первый слайдер: несколько div с шириной 100% в линию, с background-image-ами. Прокрутка работает путем изменения позиции родительского контейнера(, содержащего div-ы с изображениями)-transform('translateX(position)') /position=100% или 200% или 300% и т.д./ Все работает, если overflow:visible, если overflow:hidden, то показывает только первое изображение, остальных нет-пустое пространство. Уже думаю сделать с помощью другого метода(display:none/block или переставлять активный класс на текущее изображение.) Просто интересно для понимания если применять overflow:hidden хвост слайдера обрезается навсегда или оставшиеся изображения должны сдвигаться? и как сделать так, чтобы работало с таким подходом, если это возможно?
HTML:
<button class="button prev">prev</button>
<button class="button next">next</button>
<div class="sliderline">
<div class="sldrimg one"></div>
<div class="sldrimg two"></div>
<div class="sldrimg img3"></div>
<div class="sldrimg four"></div>
</div>
CSS:
sliderline{
display: flex;
position: relative;
width: 100%;
/*overflow: hidden;*/
}
sldrimg {
width: 100%;
height: 475px;
background-size: cover;
flex-shrink: 0;
box-sizing: border-box;
}
JS:
let position = 0
document.querySelector('.next').addEventListener('click', function(){
const sliderline = document.querySelector('.sliderline')
let offset = 100
position -= offset
sliderline.style.transform = `translate(${position}%,0)`
})
document.querySelector('.prev').addEventListener('click', function(){
const sliderline = document.querySelector('.sliderline')
let offset = 100
position += offset
sliderline.style.transform = `translate(${position}%,0)`
})