16.01.2018, 14:13
|
Новичок на форуме
|
|
Регистрация: 16.01.2018
Сообщений: 4
|
|
вкладки и слайдер slicks
Всем Драсте)) Есть задача сделать вкладки и при клике на разные вкладки чтобы менялись данные слайдера.
Нашёл скрипт в нете, все работает слайдеры меняются, но при нажатии на вкладку, слайдер отображается не корректно, видно на второй картинке. Если пролистать слайдер то получается фигня как на третей картинке. Если пролистать раза три то слайдер работает как нужно (первая картинка).
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
}
}]
}); |
|
|
16.01.2018, 14:28
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
Сообщение от ildar94
|
$(".sl").not(":first").hide();
|
поставить после $('.sl').slick
|
|
16.01.2018, 14:48
|
Новичок на форуме
|
|
Регистрация: 16.01.2018
Сообщений: 4
|
|
попробовал, поломался слайдер
|
|
16.01.2018, 14:58
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
ildar94,
добавьте красное, вдруг поможет.
$(".tabs_box .tabs").click(function() {$(window).trigger("resize");
|
|
16.01.2018, 15:07
|
Новичок на форуме
|
|
Регистрация: 16.01.2018
Сообщений: 4
|
|
ничего не изменилось, пробовал убрать правило для мобилки и медиа запросы, тоже не помогает
|
|
16.01.2018, 15:14
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,120
|
|
ildar94,
нужен размер картинок, блоки скрыты размера нет , есть три способа решения
1.скрывать блоки после загрузки картинок и инициализации слайдеров.
2.включать подстроку размеров после клика по табу trigger("resize"); или встроенное api слайдера.
3. прописать размеры картинок в css.
|
|
16.01.2018, 15:29
|
Новичок на форуме
|
|
Регистрация: 16.01.2018
Сообщений: 4
|
|
Код:
|
.sl {
max-width: 1200px;
height: auto;
.sl__img {
width: 300px;
height: 300px;
}
.sl__title {
color: #363636;
font-family: "Open Sans", 'serif';
font-size: 16px;
font-weight: 400;
line-height: 43px;
text-align: center;
}
.sl__desc {
color: #363636;
font-family: "Open Sans", 'serif';
font-size: 16px;
font-weight: 400;
line-height: 43px;
text-align: center;
display: none;
} |
|
|
|
|