Почему 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"/>