Не работает overflow: hidden, хотя ширину указывала

Question

Нужно, чтобы картинки, которые выстроились в одну линию, благодаря flex, были обрезаны так. чтобы видно было только одну картинку, пока пользователь не перелистнет на другую. Сам механизм перелистывания ещё не написан, но это и неважно. Почему-то напрочь игнорируется overflow: hidden. Где ошибка, проблема, почему не работает?

html

                <div class="offer__slider-wrapper">
                    <div class="offer__slider-inner">
                        <div class="offer__slide">
                            <img src="img/slider/pepper.jpg" alt="pepper">
                        </div>
                         <div class="offer__slide">
                            <img src="img/slider/food-12.jpg" alt="food">
                        </div>
                        <div class="offer__slide">
                            <img src="img/slider/olive-oil.jpg" alt="oil">
                        </div>
                        <div class="offer__slide">
                            <img src="img/slider/paprika.jpg" alt="paprika">
                        </div> 
                    </div>
                </div>

js

некоторые строки кода здесь не важны, просто куском скопировала. Стили только инлайновские, потому что offer__slider-inner контейнер был создан уже позже. Да и работать я стараюсь лишь в js.

 const slides = document.querySelectorAll('.offer__slide'),
          parentSlideContainer = document.querySelector('.offer__slider-counter'),
          prev = parentSlideContainer.querySelector('.offer__slider-prev'),
          next = parentSlideContainer.querySelector('.offer__slider-next'),
          total = document.querySelector('#total'),
          current = document.querySelector('#current'),
          slidesWrapper = document.querySelector('.offer__slider-wrapper'),
          slidesField = document.querySelector('.offer__slider-inner'),
          widthSlidesWrapper = window.getComputedStyle(slidesWrapper).width;

    let slideIndex = 1;
    let offset = 0;

    slidesField.style.width = 100 * slides.length + '%';
    slidesField.style.display = 'flex';
    slidesField.style.transitin = '05s all';
    slidesField.style.overflow = 'hidden';

    slides.forEach(slide => {
        slide.style.width = widthSlidesWrapper;
    });

css


.offer__slider-wrapper {
    width: 100%;
    margin-top: 15px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, .25)
}

Если нужно что-то ещё, скажите, я докину.

Answer 1

Потому что картинки не выходят за рамки вашего контейнера. Надо задать высоту, тогда будут четки ограничения. А вообще такой механизм делается с помощью display: none/block для картинок.

То есть при переключении у всех меняется display на none, а у следующей (которая должна быть) на block. А ваш overflow: hidden просто будет обрубать картинки.

Answer 2

Я просто оголтелая дуралейка. Я снова проглядела от невнимательности (и небольшого затупа) всю структуру кода.

Я написала slidesField.style.overflow = 'hidden'; А надо было slidesWrapper.style.overflow = 'hidden';

Потому что в wrapper стоит 100%, а вся линия с картинками это 400% и обрезать же надо именно по одной, 100%. Теперь всё обрезалось и заработало.

p.s. хотя всё же тот (вовсе не касаемый вопроса) случай с hidden класс присвоенный диву, который работал у него без display: none/block, хотя выполнял те же функции (т.е. просто брал и отключал дисплей когда ставился в hidden и наоборот с классом show) до сих пор меня озадачивает (потому что у меня так не работало, но видимо либо я опять протупила, либо лыжи таки не едут)

БЛОГ НА HUSL

Не работает overflow: hidden, хотя ширину указывала

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