Почему Slick Slider внутри табов разворачивается не полностью?

Почему Slick Slider внутри табов разворачивается не полностью?

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

Сайт: https://greenway-planet.online/

jQuery(document).ready(function($) {
// Show the first tab by default
$('.tabs-stage > div').hide();
$('#tab-1').show();
$('.zenq').addClass('tab-active');
$('.main-kat').slick({
	dots: true,
	arrows: true,
	slidesToShow: 1,
	});
	
$('.scnd-kat-sl').slick({
	dots: true,
	arrows: true,
	slidesToShow: 1,
	});
});

// Change tab class and display content
jQuery(document).ready(function($) {
$('.tabs-nav a').on('click', function(event){
event.preventDefault();
$('.tabs-nav li').removeClass('tab-active');
$(this).parent().addClass('tab-active');
$('.tabs-stage > div').hide();
$($(this).attr('href')).show();
});
});
.for-a-cat {
    text-align: center;
    display: flex;
    justify-content: space-between;
    width: 430px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}
.for-a-cat a:nth-child(1) {
    background-color: #e9ffe1;
}
.for-a-cat a {
    width: 195px;
    height: 40px;
    border: 2px solid #6bc742;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    color: #528a39;
    font-weight: 500;
    font-size: 14px;
    margin-left: 0px;
}
.main-kat {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 37px;
    width: 100% !important;
}
.cat-slide {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: space-between;
}
.cat-child {
    height: 300px;
    width: 574px;
    background-color: #f4f4f4;
    margin-bottom: 22px;
    padding-top: 65px;
    padding-left: 33px;
}
<div class="tabs">
	<ul class="for-a-cat tabs-nav">
		<li><a href="#tab-1">по категориям</a></li>
		<li><a href="#tab-2">по моделям</a></li>
	</ul>
	<div class="tabs-stage">
		<div id="tab-1" style="display: flex;">
			<div class="main-kat slick">
				<div class="cat-slide">
					<div class="cat-child for-backgr-1">
						<h3>Хит Сезона</h3>
						<h2>Для кухни</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child for-backgr-2">
						<h3>Идеально чисто!</h3>
						<h2>Для уборки</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child  for-backgr-3">
						<h3>Полезно и экологично</h3>
						<h2>Для здоровья</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child for-backgr-4">
						<h3>Лучшее - детям!</h3>
						<h2>Для детей</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
				</div>
				<div class="cat-slide">
					<div class="cat-child for-backgr-5">
						<h3>Лучшее для тела</h3>
						<h2>Для ухода</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child for-backgr-6">
						<h3>Свежесть и комфорт</h3>
						<h2>Аромамасла</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child  for-backgr-7">
						<h3>Полезно и экологично</h3>
						<h2>Аксессуары</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child for-backgr-8">
						<h3>Начни с Greenway</h3>
						<h2>Для старта</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
				</div>
			</div>
		</div>
		<div id="tab-2" style="display: none;">
		    <div class="scnd-kat-sl slick">
				<div class="cat-slide">
					<div class="cat-child for-backgr-1">
						<h3>Хит Сезона</h3>
						<h2>Для кухни</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child for-backgr-2">
						<h3>Идеально чисто!</h3>
						<h2>Для уборки</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child  for-backgr-3">
						<h3>Полезно и экологично</h3>
						<h2>Для здоровья</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child for-backgr-4">
						<h3>Лучшее - детям!</h3>
						<h2>Для детей</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
				</div>
				<div class="cat-slide">
					<div class="cat-child for-backgr-5">
						<h3>Лучшее для тела</h3>
						<h2>Для ухода</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child for-backgr-6">
						<h3>Свежесть и комфорт</h3>
						<h2>Аромамасла</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child  for-backgr-7">
						<h3>Полезно и экологично</h3>
						<h2>Аксессуары</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
					<div class="cat-child for-backgr-8">
						<h3>Начни с Greenway</h3>
						<h2>Для старта</h2><a class="element-oth">ПОДРОБНЕЕ</a></div>
				</div>
			</div>
		</div>
	</div>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css" rel="stylesheet"/>


Ответы (0 шт):