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