Возникла проблема с slick слайдером. При подключении эффекта он начинает ломать верстку блока целиком. Причем иногда может растянуть страницу по вертикали до страшно большого размера. Я уже подключал эффект на этой же странице и все работает нормально без ошибок. Начал подключать его же в другом блоке и вызывает ошибку. Перепробовал много способов, но причину выяснить мне не удалось. Может глаз за мылился, может я где-то ошибся при написании. Поэтому прошу помощи у профессионалов кто откликнется. Код ниже.
<section class="section-block1-container">
<div class="section-block1-title">
<h2>Почему 90% клиентов выбирают нас</h2>
<p>Команда «Катателеком» сосредоточена на качестве связи и постоянном расширении функционала системы. Это позволяет нашим клиентам решать первостепенные бизнес-задачи и масштабировать деятельность.</p>
</div>
<div class="section-block1-content">
<div class="wrap">
<div class="section-block1-cards">
<div class="block1-card">
<img src="<?php t_p(); ?>/img/4-4.png" alt="4-4" class="img-fluid">
<div class="block1-card-body">
<h4>Выгодные тарифные планы</h4>
<p class="">Удерживаем низкую стоимость услуг при неизменно высоком качестве за счет поиска новых локальных провайдеров.</p>
</div>
</div>
<div class="block1-card">
<img src="<?php t_p(); ?>/img/3-4.png" alt="4-4" class="img-fluid">
<div class="block1-card-body">
<h4>Лучшая техническая поддержка</h4>
<p>Предложим персональные цены при заказе более трех номеров или оплате договора на срок от 1 года.</p>
</div>
</div>
<div class="block1-card">
<img src="<?php t_p(); ?>/img/2-5.png" alt="4-4" class="img-fluid">
<div class="block1-card-body">
<h4>Индивидуальные скидки</h4>
<p class="">Наши специалисты на связи 24/7. Несколько уровней поддержки быстро решат любую проблему.</p>
</div>
</div>
<div class="block1-card">
<img src="<?php t_p(); ?>/img/1-4.png" alt="4-4" class="img-fluid">
<div class="block1-card-body">
<h4>Гарантия безопасности</h4>
<p>Заключаем официальный договор и меняем настройки только после согласования с клиентом.</p>
</div>
</div>
</div>
</div>
<div class="section-block1-img">
<img src="<?php t_p(); ?>/img/feature_isometric.png" alt="" class="img-fluid" style="width: 100%; height: auto;">
</div>
</div>
</section>
.section-block1-container {
display: flex;
flex-direction: column;
flex-wrap: wrap;
position: relative;
height: auto;
max-width: 1200px;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.section-block1-title {
display: flex;
align-items: center !important;
justify-content: center !important;
flex-direction: column;
flex-wrap: wrap;
padding: 2rem 0;
h2 {
text-align: center;
font-size: 34px;
font-weight: 600;
color: #031b4e;
}
p {
padding: 1rem auto;
color: #727a72;
font-size: 20px;
font-weight: 500;
text-transform: none;
font-style: normal;
text-decoration: none;
line-height: 1.4em;
letter-spacing: 0;
text-align: center;
padding-top: 1rem;
}
}
.wrap {
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex: 0 0 50%;
}
.section-block1-content {
display: flex !important;
flex-direction: row;
flex-wrap: nowrap;
position: relative;
padding: 2rem 0;
}
.section-block1-cards {
//position: relative;
display: flex !important;
flex-direction: row;
flex-wrap: wrap;
// height: auto;
}
.block1-card {
flex: 0 0 50%;
max-width: 50%;
padding: 15px;
h4 {
font-size: 20px;
font-weight: 400;
}
p {
font-size: 16px;
font-weight: 400;
line-height: 1.7em;
color: #727a82;
}
}
.section-block1-image {
display: flex;
flex-direction: row;
flex-wrap: wrap;
height: auto;
//max-width: 40%;
}
@media screen and (max-width: 900px) {
.section-block1-cards {
flex-direction: column;
width: 100%;
}
.block1-card {
flex: 0 0 100% !important;
max-width: 100% !important;
}
.section-block1-image {
display: none;
}
}
if ($(window).width() < 700) {
$('.section-block1-cards').slick({
lazyLoad: 'ondemand',
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 2000
});
}
Средний
Средний
