добрый день!
проблема такая: есть табы в табах, а в последних еще и slick слайдер. при открытии первых табов все выглядит отлично, но когда начинаем переходить по вкладкам — все ломается, а слайдер вообще не инициализируется.
ссылка на проблему
табы активируются через дата-атрибуты. нагуглила, что можно повесить инициализацию слайдера и активацию внутренних табов на событие открытия вкладки, которая их содержит, но пробовала сделать сама - не работает вообще.
код одной вкладки:
<ul class="ul-unstyled list-material">
<li class="active"><a href="#fasady" data-toggle="tab">Варианты фасадов</a></li>
<li><a href="#karkas" data-toggle="tab">каркас</a></li>
<li><a href="#stoleshnicy" data-toggle="tab">столешницы</a></li>
<li><a href="#furnitura" data-toggle="tab">фурнитура</a></li>
</ul>
<div class="tab-content">
<div class="material-content-wrap fade in active" id="fasady">
<div class="material-title">
<div class="row">
<div class="col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-12 col-xs-12">
<div class="box">
<h3>Кухня с роскошными фасадами</h3>
<p>Создаст настроение и подарит положительные эмоции на каждый день</p>
</div><!-- //.box -->
</div><!-- //.col -->
</div><!-- //.row -->
</div><!-- //.material-title -->
<div class="material-content">
<div class="row">
<div class="col-lg-9 col-lg-offset-3 col-md-9 col-md-offset-3 col-sm-12 col-xs-12">
<ul class="ul-unstyled sublist-material">
<li class="active"><a href="#mdf" data-toggle="tab">ПЛЕНКА МДФ</a></li>
<li><a href="#plastic" data-toggle="tab">ПЛАСТИК</a></li>
<li><a href="#emal" data-toggle="tab">ЭМАЛЬ</a></li>
<li><a href="#akril" data-toggle="tab">АКРИЛ</a></li>
<li><a href="#massiv" data-toggle="tab">МАССИВ ДЕРЕВА</a></li>
</ul>
</div><!-- //.col -->
</div><!-- //.row -->
<div class="tab-content">
<div class="material-wrap fade in active">
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<div class="foto-wrap">
<div class="material-slider" id="material1">
<div class="material-foto-sigle">
<img src="assets/img/kitchen-mdf.jpg" alt="">
</div><!-- //. -->
<div class="material-foto-sigle">
<img src="assets/img/kitchen-mdf.jpg" alt="">
</div><!-- //. -->
<div class="material-foto-sigle">
<img src="assets/img/kitchen-mdf.jpg" alt="">
</div><!-- //. -->
<div class="material-foto-sigle">
<img src="assets/img/kitchen-mdf.jpg" alt="">
</div><!-- //. -->
<div class="material-foto-sigle">
<img src="assets/img/kitchen-mdf.jpg" alt="">
</div><!-- //. -->
</div><!-- //.material-slider -->
<div class="material-slider-nav" id="materialNav1">
<div class="material-nav-single">
<img src="assets/img/kitchen-mdf.jpg" alt="">
</div><!-- //.material-nav-single -->
<div class="material-nav-single">
<img src="assets/img/kitchen-mdf.jpg" alt="">
</div><!-- //.material-nav-single -->
<div class="material-nav-single">
<img src="assets/img/kitchen-mdf.jpg" alt="">
</div><!-- //.material-nav-single -->
<div class="material-nav-single">
<img src="assets/img/kitchen-mdf.jpg" alt="">
</div><!-- //.material-nav-single -->
<div class="material-nav-single">
<img src="assets/img/kitchen-mdf.jpg" alt="">
</div><!-- //.material-nav-single -->
</div><!-- //.material-slider-nav -->
</div><!-- //.foto-wrap -->
</div><!-- //.col -->
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-wrap">
<dl>
<dt>Быстрое изготовление:</dt>
<dd>7-14 дней</dd>
<span>НИЗКАЯ СТОИМОСТЬ</span>
<dt>СРОК ЭКСПЛУАТАЦИИ:</dt>
<dd>15 лет</dd>
<dt>КОЛ-ВО ЦВЕТОВ:</dt>
<dd>266</dd>
</dl>
</div><!-- //.info-wrap -->
</div><!-- //.col -->
</div><!-- //.row -->
</div><!-- //.material-wrap -->
</div><!-- //.tab-content -->
</div><!-- //.material-content -->
</div><!-- //.material-content-wrap -->
</div><!-- //.tab-content -->
инициализация слайдера:
$('.foto-wrap').each(function(index){
var material_slider_id = $(this).find('.material-slider').attr('id');
var material_slider_nav_id = $(this).find('.material-slider-nav').attr('id');
if( typeof(material_slider_id) != 'undefined' && material_slider_id != '' && typeof(material_slider_nav_id) != 'undefined' && material_slider_nav_id != '' ){
$('#'+material_slider_id).slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
fade: true,
asNavFor: '#'+material_slider_nav_id
});
$('#'+material_slider_nav_id).slick({
slidesToShow: 5,
slidesToScroll: 1,
asNavFor: '#'+material_slider_id,
centerMode: true,
centerPadding: 0,
dots: false,
focusOnSelect: true,
arrows: false,
responsive: [
{
breakpoint: 767,
settings: {
arrows: false
}
}
]
});
}
});
