@gasonger0

Почему slick slider ломает FlexBox и CSS Grid?

Есть контейнер флексбокс, слева блок текста, а справа - динамическая галерея. Раньше при листании блок с галереей вылезал за пределы, но фикс этого я уже нашёл. Сейчас, при загрузке страницы, ширина блоков одна, а после пары перелистываний - другая. Код приведу ниже:

HTML:

<div class="about-builder">
        <div class="builder-description">
          <p>
            Элегантный проект бизнес-класса надёжного застройщика,
            расположенный в сердце города. Премиальное расположение, центр
            культурной и деловой жизни - все способствует созданию клубной
            атмосферы.
          </p>
          <p>
            Отделка включает дорогостоящие элементы из металла, дерева, камня
            и других современных ценных материалов.
          </p>
          <p>
            Каждая квартира в доме имеет свои уникальные черты: плавные
            округлые линии стен, неоднотипные планировки, панорманое
            остекление.
          </p>
          <p>
            Технологические решения, использованные в проекте жилого
            комплекса, представляют самые актуальные мировые тренды
            (техническое оснащение дома на самом высоком уровне), Вы быстро
            привыкнете к комфорту, который обеспечит интегрированная система
            smart home.
          </p>
        </div>

        <div class="documents">
          <div>
            <img src="img/docs/doc_1.jpg" alt="doc_1" class="items" />
          </div>
          <div>
            <img src="img/docs/doc_2.jpg" alt="doc_2" class="items" />
          </div>
          <div>
            <img src="img/docs/doc_1.jpg" alt="doc_1" class="items" />
          </div>
          <div>
            <img src="img/docs/doc_2.jpg" alt="doc_2" class="items" />
          </div>
        </div>
      </div>


JS:

<script>
        $('.documents').slick({
          slidesToShow: 2,
          slidesToScroll: 1,
          autoplay: true,
          autoplaySpeed: 2000,
          dots: true,
          prevArrow: "<button class='square'><img src='img/icons/chevron-left.svg' class='square b-icon'></button>",
          nextArrow: "<button class='square'><img src='img/icons/chevron-left.svg' class='square f-icon'></button>",
          /* responsive: [
            {
              breakpoint: 1024,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 3,
                infinite: true,
                dots: true
              }
            },
            {
              breakpoint: 600,
              settings: {
                slidesToShow: 2,
                slidesToScroll: 2
              }
            },
            {
              breakpoint: 480,
              settings: {
                slidesToShow: 1,
                slidesToScroll: 1
              }
            }
          ] */


CSS:

.about-builder {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.builder-description {
  width: 150%;
  display:inline-block;
  font-size: 2vh;
}

.documents .items {
  height: 30vh;
  object-position: center;

}

.documents{
  display: inline-block;
  min-height: 0px;
  min-width: 0px;
}


Пробовал менять адаптивность самого Slick'a, менять флекс на сетку, но ничего не сработало. Есть у кого-то какие-нибудь идеи?
  • Вопрос задан
  • 83 просмотра
Пригласить эксперта
Ответы на вопрос 1
@123581321345589
web-разработчик
Нужно чтоб тег к которому применяется slick не был ячейкой флекса.
В Вашем случае нужно внутрь .documents добавить .documents_slider (а внутри соответственно все слайды) и на него вешать slick.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
30 янв. 2023, в 23:32
5000 руб./за проект
30 янв. 2023, в 23:11
500 руб./за проект