How to activate Slick slider in tabs?

Question

JavaScript

good afternoon!
the problem is this: there are tabs in tabs, and in the latter there is also a slick slider. when you open the first tabs, everything looks great, but when we start to navigate through the tabs, everything breaks down, and the slider is not initialized at all.
link to problem
tabs are activated via data attributes. I googled that you can hang the initialization of the slider and the activation of internal tabs on the opening event of the tab that contains them, but I tried to do it myself - it does not work at all.
one tab code:

<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 -->

slider initialization:

$('.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
              }
            }
          ]
        });
      }
    });

Answer 1

Set the initialization of the sliders to the click event on the tab button.
And you will have the initialization of the first slider by clicking on the top tab joxi.ru/Q2KG44yu9xpDR2
And all the rest on the immediate parent - joxi.ru/VrwNnnLHKP018A