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

Question

[it_pear_yurec]

Подключил библиотеку бутстрап и слик слайдер. Вставил в слайдер ячейки

<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% слуаев после перезагрузки слайдер то сбивается то нормально работает.
нормальная работа
Неправильная работа

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

Comments

[RAX7]

А если так:

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

[it_pear_yurec]

RAX7, не, не помогает, я думаю что дело в том, что стили boоtstrap поочередно перебивают стили slick, я решил сделать по другому, взял отменил стили бутстрап и прописал стили для slick

[Виталий Першин]

Слайды слика имеют свои стили, а вы им подсовываете блоки которые имеют размер, в то время как слик высчитывает свои размеры. Вы идеале лучше всего под слайды выделить пустые div и уже в них добавлять свои блоки

[it_pear_yurec]

Виталий, Именно так и сделал

Answer 1

[gretyl007]

Пропишите функцию так, чтобы она срабатывала и для ресайза, и при загрузке страницы.