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) до сих пор меня озадачивает (потому что у меня так не работало, но видимо либо я опять протупила, либо лыжи таки не едут)

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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