В слайдере 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, время: 08:16. |