@ph0en1x_48

Ломается верстка при подключении Slick слайдера?

Возникла проблема с 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
		});
	}
  • Вопрос задан
  • 55 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы