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放在旋转木马上时，它会获得样式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。