@it_pear_yurec

Slick ругается на rколонки bootstrap 4, что делать?

Подключил библиотеку бутстрап и слик слайдер. Вставил в слайдер ячейки
<div class="row product-slider slider-sm">
					<div class="col-6 col-sm-4 col-md-4 col-lg-4 col-xl-3">
						<div class="product-item text-center">
							<p class="product-action product-action__exclusive">
								Эксклюзив
							</p>
							<img src="../img/banka.jpg" alt="">
							<p class="product__title">
								Мульти - I, 30 таблеток, Solgar
							</p>
							<div class="product-price">
								<div class="container">
									<div class="row">
										<div class="col-6">
											<p class="product-price__price__active">584 ₽</p>
										</div>
										<div class="col-6">
											<p class="priduct-price__price__noactive">699 ₽</p>
										</div>
									</div>
								</div>
									
								<div class="container">
									<div class="row">
										<div class="col-md-6 col-sm-12 col-xs-12 pr-md-1 pl-lg-0">
											<a href="" class="my-btn btn-lemon">Купить</a>
										</div>
										<div class="col-md-6 d-none d-md-block pl-md-1 pr-lg-0">
											<button class="my-btn btn-orange">В корзину</button>
										</div>
									</div>
									<div class="row">
										<p class="product-item__action">
											Экономия 30% на товар
										</p>
									</div>
								</div>
									
							</div>
						</div>
					</div>

					<div class="col-6 col-sm-4 col-md-4 col-lg-4 col-xl-3">
						<div class="product-item text-center">
							<p class="product-action product-action__action">
								Акция
							</p>
							<img src="../img/banka.jpg" alt="">
							<p class="product__title">
								Мульти - I, 30 таблеток, Solgar
							</p>
							<div class="product-price">
								<div class="container">
									<div class="row">
										<div class="col-6">
											<p class="product-price__price__active">584 ₽</p>
										</div>
										<div class="col-6">
											<p class="priduct-price__price__noactive">699 ₽</p>
										</div>
									</div>
								</div>
									
								<div class="container">
									<div class="row">
										<div class="col-md-6 col-sm-12 col-xs-12 pr-md-1 pl-lg-0">
											<a href="" class="my-btn btn-lemon">Купить</a>
										</div>
										<div class="col-md-6 d-none d-md-block pl-md-1 pr-lg-0">
											<button class="my-btn btn-orange">В корзину</button>
										</div>
									</div>
								</div>
									
							</div>
						</div>
					</div>


					<div class="col-6 col-sm-4 col-md-4 col-lg-4 col-xl-3">
						<div class="product-item text-center">
							<p class="product-action product-action__new">
								Новинка
							</p>
							<img src="../img/banka.jpg" alt="">
							<p class="product__title">
								Мульти - I, 30 таблеток, Solgar
							</p>
							<div class="product-price">
								<div class="container">
									<div class="row">
										<div class="col-6">
											<p class="product-price__price__active">584 ₽</p>
										</div>
										<div class="col-6">
											<p class="priduct-price__price__noactive">699 ₽</p>
										</div>
									</div>
								</div>
									
								<div class="container">
									<div class="row">
										<div class="col-md-6 col-sm-12 col-xs-12 pr-md-1 pl-lg-0">
											<a href="" class="my-btn btn-lemon">Купить</a>
										</div>
										<div class="col-md-6 d-none d-md-block pl-md-1 pr-lg-0">
											<button class="my-btn btn-orange">В корзину</button>
										</div>
									</div>
								</div>
									
							</div>
						</div>
					</div>
</div>

if (window.innerWidth <= 772) {		
	  $('.product-slider').slick({
		  slidesToShow: 2,
		  slidesToScroll: 2,
		  rows:1,
		  dots: true,
		  arrows: false
		});
	}

думал что будет по две ячейки, но в 50% слуаев после перезагрузки слайдер то сбивается то нормально работает.
нормальная работа 5c15a4d2e815f232466976.png
Неправильная работа 5c15a520cf75d956631279.png

Если в подключаемом скрипте прописать async (тот самый скрипт где я прописал найстройку слайдера ниже 772 пх) то это не сильно помогает, но в 1 из 3 слуяаев после перезагрузки слайдер все равно сбивается
  • Вопрос задан
  • 66 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через TM ID
Похожие вопросы