<div class="container">
<ul class="tabs_main">
<li class="active"><a href="#product1">Масло</a></li>
<li><a href="#product2">Семена и орехи</a></li>
<li><a href="#product3">Мёд</a></li>
</ul>
<div class="tab_container">
<div id="product1" class="tab_content">
<h2>1 вкладка</h2>
<div class="products">
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
</div>
</div>
<div id="product2" class="tab_content">
<h2>2 вкладка</h2>
<div class="products">
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
</div>
</div>
<div id="product3" class="tab_content">
<h2>3 вкладка</h2>
<div class="products">
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
<div class="image"><img class="slick-slider-img" alt="Alt" src="https://i.imgur.com/18tqfJE.jpg" /></div>
</div>
</div>
</div>
</div>
.container {
width:1200px;
margin:0 auto;
}
.products .image img {
max-width:100%;
height:auto;
}
.tabs_main {
display: -ms-flexbox;
display: -webkit-box;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 30px;
list-style-type:none;
}
.tabs_main li {margin-bottom: 30px;}
.tabs_main li + li {padding-left: 20px;}
.tabs_main li a {font-weight: bold;font-size: 20px;line-height: 24px;text-transform: uppercase;padding: 8px 21px;display: inline-flex;}
.tabs_main li a:hover, .tabs_main .active a {
background: #B48924;
border-radius: 3px;
color: #fff;
}
.tab_container .slider-arrow-prev {
position: absolute;
left: -100px;
top: 46%;
width: 80px;
height: 45px;
border-bottom: 4px solid #B9B9B9;
display: flex;
align-items: center;
justify-content: center;
}
.tab_container .slider-arrow-prev svg{}
.tab_container .slider-arrow-prev svg:hover{cursor:pointer;}
.tab_container .slider-arrow-next {
position: absolute;
right: -100px;
top: 46%;
width: 80px;
height: 45px;
border-bottom: 4px solid #b48924;
display: flex;
align-items: center;
justify-content: center;
}
.tab_container .slider-arrow-next svg{}
.tab_container .slider-arrow-next svg:hover{cursor:pointer;}
$('.tab_content').hide();
$('.tab_content:first').show();
$('.tabs_main li:first').addClass('active');
$('.tabs_main li').click(function(event) {
event.preventDefault();
$('.tabs_main li').removeClass('active');
$(this).addClass('active');
$('.tab_content').hide();
var selectTab = $(this).find('a').attr("href");
$(selectTab).fadeIn();
$('.tab_content .products').slick('setPosition')
});
$('.tab_content .products').slick({
infinite: true,
arrow: true,
slidesToShow: 3,
adaptiveHeight: true,
slidesToScroll: 1,
responsive: [
{
breakpoint: 1200,
settings: {
slidesToShow: 2,
slidesToScroll: 1,
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1,
slidesToScroll: 1,
dots: false,
arrows: true,
}
}
],
});