Добрый вечер!
Подскажите, пожалуйста...
Есть 3 "таба", на каждом из них расположено по два слайдера Slick (т.е. всего 3 слайдера с основным содержимым и 3 слайдера с превью). При переходе на "таб" вызывается метод "reinit" для основного слайдера и слайдера с превью (которые находятся на этом табе).
Когда у слайдеров бесконечная прокрутка выключена (т.е. в настройках передаю "infinite: false"), то все работает хорошо. Но стоит ее включить, появляется неприятный эффект: при каждом переходе добавляется два слайда. Чем больше раз щелкать по табам, тем, соответственно, все больше "лишних" слайдов.
Уже не знаю на что думать. Создал тестовый пример: вызывал "reinit" для слайдера без табов - все работает хорошо. Значит табы не дружат со слайдером...
Может кто-то пнет в нужном направлении?
Спасибо!
Вот код слайдеров с табами:
<div class="tabs">
<ul class="tabs_ul">
<li class="tabs_li">Таб 1</li>
<li class="tabs_li">Таб 2</li>
<li class="tabs_li">Таб 3</li>
</ul>
<div>
<div>
<center>
<div class="slide_1_mini hidden-xs">
<div class="sl__slide_mini">
<img src="uploads/p1k_01m.jpg">
</div>
<div class="sl__slide_mini">
<img src="uploads/p1k_01m.jpg">
</div>
<div class="sl__slide_mini">
<img src="uploads/p1k_01m.jpg">
</div>
<div class="sl__slide_mini">
<img src="uploads/p1k_01m.jpg">
</div>
<div class="sl__slide_mini">
<img src="uploads/p1k_01m.jpg">
</div>
<div class="sl__slide_mini">
<img src="uploads/p1k_01m.jpg">
</div>
</div>
<div class="slide_1_main">
<div class="sl__slide">
1
<center><img class="sl__img" src="uploads/p1k_01.jpg"></center>
<div class="sl__text">
<a href="#" class="button1" > Пуск! </a>
</div>
</div>
<div class="sl__slide">
2
<center><img class="sl__img" src="uploads/p1k_01.jpg"></center>
<div class="sl__text">
<a href="#" class="button1" > Пуск! </a>
</div>
</div>
<div class="sl__slide">
3
<center><img class="sl__img" src="uploads/p1k_01.jpg"></center>
<div class="sl__text">
<a href="#" class="button1" > Пуск! </a>
</div>
</div>
<div class="sl__slide">
4
<center><img class="sl__img" src="uploads/p1k_01.jpg"></center>
<div class="sl__text">
<a href="#" class="button1" > Пуск! </a>
</div>
</div>
<div class="sl__slide">
5
<center><img class="sl__img" src="uploads/p1k_01.jpg"></center>
<div class="sl__text">
<a href="#" class="button1" > Пуск! </a>
</div>
</div>
<div class="sl__slide">
6
<center><img class="sl__img" src="uploads/p1k_01.jpg"></center>
<div class="sl__text">
<a href="#" class="button1" > Пуск! </a>
</div>
</div>
</div>
</center>
</div>
<div>
<center>
<div class="slide_2_mini hidden-xs">
<div class="sl__slide_mini">
<img src="uploads/p1k_01m.jpg">
</div>
<div class="sl__slide_mini">
<img src="uploads/p1k_01m.jpg">
</div>
</div>
<div class="slide_2_main">
<div class="sl__slide">
<center><img class="sl__img" src="uploads/p1k_01.jpg"></center>
<div class="sl__text">
<a href="#" class="button1" > Пуск! </a>
</div>
</div>
<div class="sl__slide">
<center><img class="sl__img" src="uploads/p1k_01.jpg"></center>
<div class="sl__text">
<a href="#" class="button1" > Пуск! </a>
</div>
</div>
</div>
</center>
</div>
<div>
<center>
<div class="slide_3_mini hidden-xs">
<div class="sl__slide_mini">
<img src="uploads/p1k_01m.jpg">
</div>
<div class="sl__slide_mini">
<img src="uploads/p1k_01m.jpg">
</div>
</div>
<div class="slide_3_main">
<div class="sl__slide">
<center><img class="sl__img" src="uploads/p1k_01.jpg"></center>
<div class="sl__text">
<a href="#" class="button1" > Пуск! </a>
</div>
</div>
<div class="sl__slide">
<center><img class="sl__img" src="uploads/p1k_01.jpg"></center>
<div class="sl__text">
<a href="#" class="button1" > Пуск! </a>
</div>
</div>
</div>
</center>
</div>
</div>
</div>
Код инициализации слайдеров
$(document).ready(function(){
$('.slide_1_main').slick({infinite: false,asNavFor:'.slide_1_mini'});
$('.slide_1_mini').slick({infinite: false,asNavFor:'.slide_1_main',slidesToShow:5,focusOnSelect:true,arrows:false,responsive: [
{
breakpoint: 960,
settings: {slidesToShow:5}
},
{
breakpoint: 800,
settings: {slidesToShow:4}
},
{
breakpoint: 640,
settings: {slidesToShow:3}
}
]});
$('.slide_2_main').slick({infinite: false,asNavFor:'.slide_2_mini'});
$('.slide_2_mini').slick({infinite: false,asNavFor:'.slide_2_main',slidesToShow:5,focusOnSelect:true,arrows:false,responsive: [
{
breakpoint: 960,
settings: {slidesToShow:5}
},
{
breakpoint: 800,
settings: {slidesToShow:4}
},
{
breakpoint: 640,
settings: {slidesToShow:3}
}
]});
$('.slide_3_main').slick({infinite: false,asNavFor:'.slide_3_mini});
$('.slide_3_mini').slick({infinite: false,asNavFor:'.slide_3_main',slidesToShow:5,focusOnSelect:true,arrows:false,responsive: [
{
breakpoint: 960,
settings: {slidesToShow:5}
},
{
breakpoint: 800,
settings: {slidesToShow:4}
},
{
breakpoint: 640,
settings: {slidesToShow:3}
}
]});
});
Код инициализации табов:
(function($){
jQuery.fn.lightTabs = function(options){
var createTabs = function(){
tabs = this;
i = 0;
showPage = function(i){
$(tabs).children("div").children("div").hide();
$(tabs).children("div").children("div").eq(i).show();
$(tabs).children("ul").children("li").removeClass("active");
$(tabs).children("ul").children("li").eq(i).addClass("active");
/* Реинициализация слайдера */
$('.slide_room'+String(Number(i+1))+'_main').slick('reinit');
$('.slide_room'+String(Number(i+1))+'_mini').slick('reinit');
/* Реинициализация слайдера */
}
showPage(0);
$(tabs).children("ul").children("li").each(function(index, element){
$(element).attr("data-page", i);
i++;
});
$(tabs).children("ul").children("li").click(function(){
showPage(parseInt($(this).attr("data-page")));
});
};
return this.each(createTabs);
};
})(jQuery);
$(document).ready(function(){
$(".tabs").lightTabs();
});
