@lagprincesse

Как активировать Slick слайдер в табах?

добрый день!
проблема такая: есть табы в табах, а в последних еще и 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
              }
            }
          ]
        });
      }
    });
  • Вопрос задан
  • 1916 просмотров
Пригласить эксперта
Ответы на вопрос 1
LucasKane
@LucasKane
Front-end Developer
Установите инициализацию слайдеров на событие клика по кнопке таба.
Причем у вас будет инициализация первого слайдера по клику на верхний таб joxi.ru/Q2KG44yu9xpDR2
А всех остальных на непосредственном родителе - joxi.ru/VrwNnnLHKP018A
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы