В слайдере Slick после операции "reinit" добавляется 2 лишних слайда
Добрый вечер!
Подскажите, пожалуйста... Есть 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();
});
|
| Часовой пояс GMT +3, время: 00:31. |