0

Нужно, чтобы картинки, которые выстроились в одну линию, благодаря 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)
}

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

0

2 ответа 2

0

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

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

4
  • Высоту у offer__slider-wrapper или у .offer__slider-inner уже в скрипте? Какую точно? Смотрю на сайте, вроде ничего не вылазит по высоте, почему её необходимо добавлять для того, чтобы точно сработало? Я работала по уроку, человек себе ничего такого не делал и это не первый раз, когда у меня не срабатывает то, что он делает у себя, тоже с hidden связано было. И пока что именно overflow мне и нужен, потому что делаю другой вариант слайдера. 14 мар 2021 в 19:02
  • @Маргарита урок можете показать, чтобы понять в чем проблема? 14 мар 2021 в 19:05
  • не думаю, что это возможно... на это ссылку просто так не дашь. Но у меня точь в точь также, как у него. 14 мар 2021 в 19:06
  • не знаю, что именно такого сделать с высотой надо, я добавила наугал и туда и сюда, в случае с wrapper абсолютно ничего не поменялось, а в случае с inner просто добавилась белая полоска к первой картинке, а к другим нет. Совершенно бессмысленно. Что ж, ладно, буду искать ответ сама. 14 мар 2021 в 19:14
0

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

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

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

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

Ваш ответ

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

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