0

сделал свой первый слайдер: несколько 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)`
})

1 ответ 1

0

необходимо задать overflow:hidden родительскому классу, например:

HTML
<div class="slider">
            <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>
        </div>
CSS
.slider {
    width: 100%;
    overflow: hidden;
}
.sliderline{
    display: flex;
    position: relative;
    width: 100%;

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.