вкладки и слайдер slicks
Вложений: 4
Всем Драсте)) Есть задача сделать вкладки и при клике на разные вкладки чтобы менялись данные слайдера.
Нашёл скрипт в нете, все работает слайдеры меняются, но при нажатии на вкладку, слайдер отображается не корректно, видно на второй картинке. Если пролистать слайдер то получается фигня как на третей картинке. Если пролистать раза три то слайдер работает как нужно (первая картинка).
tabs_box имеет размер 1200 как и слайдер, есть медиа запросы на уменьшение размера в зависимости от размера окна
Код:
<div class="tabs_box">
<ul class="tabs__menu">
<li class="tabs active"><a href="#" >диваны</a></li>
<li class="tabs"><a href="#">углы</a></li>
<li class="tabs"><a href="#">кровати</a></li>
<li class="tabs"><a href="#">шкафы</a></li>
<li class="tabs"><a href="#">стенки</a></li>
<li class="tabs"><a href="#">столы и стулья</a></li>
</ul>
<div id="tab1" class="sl">
<div class="sl__slide">
<img src="img/product/sl1.jpg" alt="Картинка слайдера 1" class="sl__img">
<!--<div class="sl_text">-->
<h3 class="sl__title">Название мебели</h3>
<p class="sl__desc">характеристики мебели</p>
<!--</div>-->
</div>
<div class="sl__slide">
<img src="img/product/sl2.jpg" alt="Картинка слайдера 2" class="sl__img">
<!--<div class="sl_text">-->
<h3 class="sl__title">Название мебели</h3>
<p class="sl__desc">характеристики мебели</p>
<!--</div>-->
</div>
<div class="sl__slide">
<img src="img/product/sl3.jpg" alt="Картинка слайдера 3" class="sl__img">
<!--<div class="sl_text">-->
<h3 class="sl__title">Название мебели</h3>
<p class="sl__desc">характеристики мебели</p>
<!--</div>-->
</div>
<div class="sl__slide">
<img src="img/product/sl4.jpg" alt="Картинка слайдера 4" class="sl__img">
<!--<div class="sl_text">-->
<h3 class="sl__title">Название мебели</h3>
<p class="sl__desc">характеристики мебели</p>
<!--</div>-->
</div>
<div class="sl__slide">
<img src="img/product/sl5.jpg" alt="Картинка слайдера 5" class="sl__img">
<!--<div class="sl_text">-->
<h3 class="sl__title">Название мебели</h3>
<p class="sl__desc">характеристики мебели</p>
<!--</div>-->
</div>
<div class="sl__slide">
<img src="img/product/sl6.jpg" alt="Картинка слайдера 6" class="sl__img">
<!--<div class="sl_text">-->
<h3 class="sl__title">Название мебели</h3>
<p class="sl__desc">характеристики мебели</p>
<!--</div>-->
</div>
<div class="sl__slide">
<img src="img/product/sl7.jpg" alt="Картинка слайдера 7" class="sl__img">
<!--<div class="sl_text">-->
<h3 class="sl__title">Название мебели</h3>
<p class="sl__desc">характеристики мебели</p>
<!--</div>-->
</div>
<div class="sl__slide">
<img src="img/product/sl8.jpg" alt="Картинка слайдера 8" class="sl__img">
<!--<div class="sl_text">-->
<h3 class="sl__title">Название мебели</h3>
<p class="sl__desc">характеристики мебели</p>
<!--</div>-->
</div>
<div class="sl__slide">
<img src="img/product/sl9.jpg" alt="Картинка слайдера 9" class="sl__img">
<!--<div class="sl_text">-->
<h3 class="sl__title">Название мебели</h3>
<p class="sl__desc">характеристики мебели</p>
<!--</div>-->
</div>
<div class="sl__slide">
<img src="img/product/sl10.jpg" alt="Картинка слайдера 10" class="sl__img">
<!--<div class="sl_text">-->
<h3 class="sl__title">Название мебели</h3>
<p class="sl__desc">характеристики мебели</p>
<!--</div>-->
</div>
</div>
Код:
$(".sl").not(":first").hide();
$(".tabs_box .tabs").click(function() {
$(".tabs_box .tabs").removeClass("active").eq($(this).index()).addClass("active");
$(".sl").hide().eq($(this).index()).fadeIn()
}).eq(0).addClass("active");
Код:
@media (max-width: 1024px) {
.sl {max-width: 900px;}
.tabs_box {max-width: 901px;}
}
@media (max-width: 480px) {
.sl {max-width: 300px;}
.tabs_box {max-width: 301px;}
Код:
$('.sl').slick({
rows: 2,
infinite: true,
slidesToShow: 4,
slidesToScroll: 4,
adaptiveHeight: true,
responsive: [
{
breakpoint: 1024,
settings: {
rows: 1,
arrows: false,
slidesToShow: 3,
slidesToScroll: 3,
infinite: true,
adaptiveHeight: true
}
},{
breakpoint: 370,
settings: {
rows: 1,
arrows: false,
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
adaptiveHeight: true
}
}]
});
|