加载滑块后Slick.js中断样式设置

Question

我正在工作一个基本的HTML/CSS/JavaScript网页，在页面上是一个团队的一部分。这一部分将有4个团队，每个团队都有工作人员。使用Slick.js，用户将为相关团队选择一个标志，然后将为该团队加载一个滑块，同时隐藏前一个滑块。每个滑块都会将该团队的所有成员作为幻灯片加载。

​

​

上面的图片应该会让你对我想要实现的目标有一个直观的了解。绿色的小盒子将是旗帜，我很确定你可以解决剩下的问题。滑块将一次显示多个幻灯片，您可以单击向左或向右显示列表中的下一个幻灯片。

问题:当点击旗帜时，每个滑块都会被新的滑块替换掉，然而，当在旗帜之间点击时，我会发现滑块堆叠在一起，不能正确显示。

​

​

这是我的资料..。(HTML)：

​

    jQuery(document).ready(function($) {
      function initSlider(target) {
        $(target).slick({
          dots: false,
          infinite: true,
          speed: 300,
          autoplay: true,
          slidesToShow: 1,
          adaptiveHeight: true
        });
      }
    
      initSlider('.quote-1');
      initSlider('.quote-2');
      initSlider('.team-uk');
      initSlider('.team-uk-small');
    
      $('.team-flag').click(function(e){
        $('.team-flag').removeClass('active');
        $('.team-slider').addClass('hidden');
        $(this).addClass('active');
        var target = $(this).data('target');
        $(target).removeClass('hidden');
        initSlider(target);
      });
    
      $('.team-flag-small').click(function(e){
        $('.team-flag-small').removeClass('active');
        $('.team-slider').addClass('hidden');
        $(this).addClass('active');
        var target = $(this).data('target');
        $(target).removeClass('hidden');
        initSlider(target);
      });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick.min.js"></script>

<div class="container">
      <div class="row">
        <div class="col-md-12">
            <h4>THE TEAM</h4>
        </div>          
    
        <div class="col-md-12">
            <div class="team-slider team-uk" data-slick='{"slidesToShow": 3, "slidesToScroll": 1}'>
    
              <!-- Team Member Slide -->
              <div class="team-player col-xs-12 col-md-4">
                <img class="center-block" src="/img/andy.png" />
                <p class="lead">Andy</p>
                <p>CTO</p>
                <div class="team-icon-group">
                  <a href="" class="team-social-btn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                  <a href="" class="team-social-btn"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </div>
              </div>
              <!-- Team Member Slide end -->
    
              <!-- Repeated -->           
    
            </div>
    
            <div class="team-slider team-usa hidden" data-slick='{"slidesToShow": 3, "slidesToScroll": 1}'>
    
              <!-- Team Member Slide -->
              <div class="team-player col-xs-12 col-md-4">
                <img class="center-block" src="/img/andy.png" />
                <p class="lead">Team America</p>
                <p>CTO</p>
                <div class="team-icon-group">
                  <a href="" class="team-social-btn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                  <a href="" class="team-social-btn"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </div>
              </div>
              <!-- Team Member Slide end -->
    
              <!-- Repeated -->        
    
            </div>
    
            <div class="team-slider team-india hidden" data-slick='{"slidesToShow": 3, "slidesToScroll": 1}'>
    
              <!-- Team Member Slide -->
              <div class="team-player col-xs-12 col-md-4">
                <img class="center-block" src="/img/andy.png" />
                <p class="lead">Team India</p>
                <p>CTO</p>
                <div class="team-icon-group">
                  <a href="" class="team-social-btn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                  <a href="" class="team-social-btn"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </div>
              </div>
              <!-- Team Member Slide end -->
    
              <!-- Repeated -->      
    
            </div>
    
            <div class="team-slider team-hong-kong hidden" data-slick='{"slidesToShow": 3, "slidesToScroll": 1}'>
    
              <!-- Team Member Slide -->
              <div class="team-player col-xs-12 col-md-4">
                <img class="center-block" src="/img/andy.png" />
                <p class="lead">Team Hong Kong</p>
                <p>CTO</p>
                <div class="team-icon-group">
                  <a href="" class="team-social-btn"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
                  <a href="" class="team-social-btn"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                </div>
              </div>
              <!-- Team Member Slide end -->           
    
                <!-- Repeated --> 
    
            </div>
          </div>
    
          <div class="col-md-12 team-flag-group">
            <img src="/img/web-assests/uk-flag.jpg" alt="UK Team" class="team-flag active" id="team-uk-btn" data-target=".team-uk" />
            <img src="/img/web-assests/usa-flag.jpg" alt="USA Team" class="team-flag" id="team-usa-btn" data-target=".team-usa"/>
            <img src="/img/web-assests/india-flag.jpg" alt="India Team" class="team-flag" id="team-india-btn" data-target=".team-india"/>
            <img src="/img/web-assests/hong-kong-flag.jpg" alt="Hong Kong Team" class="team-flag" id="team-hong-kong-btn" data-target=".team-hong-kong"/>
          </div>
    
      </div>
    </div>

​

Javascript：

在这个阶段，我不相信我做错了什么，但我完全愿意纠正，因为我不会说我是JavaScript的专家，所以任何帮助都将不胜感激。

编辑:我忘了提一下，当样式没有加载时，它会在4-5秒后生效，但很明显，从最终用户的角度来看，这看起来是错误的。

Answer 1

您的问题与隐藏和显示您的旋转木马有关。当你把类hidden放在你的carousel上时，它会得到display: none;样式，然后当你删除它时，Slick很难像第一次初始化时那样设置幻灯片的位置。这就是为什么所有的幻灯片都是垂直堆叠的。

要解决此问题，应在已经初始化滑块的情况下调用.slick('setPostion')。如果滑块具有.slick-initialized类，则可以判断该滑块是否已经初始化。

然后，您的代码将如下所示：

$('.team-flag').click(function(e) {
    $('.team-flag').removeClass('active');
    $('.team-slider').addClass('hidden');
    $(this).addClass('active');
    var target = $(this).data('target');
    $(target).removeClass('hidden');

    if ($(target).hasClass('slick-initialized'))
      $(target).slick('setPosition');
    else
      initSlider(target);
  });

这样，您也只需初始化滑块一次。

有关工作解决方案的演示，请参阅this fiddle。