Slick.js breaking styling after loading a slider

问题

I am working a basic HTML/CSS/JavaScript webpage, on the page is a section for teams. This section will have 4 teams with staff for each. Using Slick.js the user will select a flag for the related team and that will then load a slider for that team while hiding the previous slider. Each slider will load all the members for that team as a slide.

The picture above should give you a visual idea of what I'm looking to achieve. the small green boxes will be the flags and I'm pretty sure you can work out the rest. The slider will show a number of slides at once and you click left or right to display the next in the list.

The issue: When clicking on flags each slider is being replaced with the new one which is working however randomly and more often than not when clicking between the flags I will find the sliders stacked and not displaying correctly.

Here is what I have... (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:

At this stage I don't believe I have done anything wrong but completely open to correction as I wouldn't say I'm an expert at JavaScript so any help will be appreciated.

Edit: I forgot to mention that when the style doesn't load it does kick in after 4-5 seconds but obviously from a end users position this looks buggy.

回答1:

Your issue has to do with hiding and showing your carousel. When you put the class hidden on your carousel it gets the style display: none; and then when you remove it Slick has a hard time setting the positions of the slides like when it first gets initialized. That's why all the slides become stacked vertically.

To fix this you should call .slick('setPostion') on the slider if it has already be initialized. You can tell if a slider has already been initialized if it has the class .slick-initialized.

Your code would then look something like this:

$('.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 way you are also only initializing the slider only once.

See this fiddle for a demo of the working solution.

来源：https://stackoverflow.com/questions/45801842/slick-js-breaking-styling-after-loading-a-slider

标签

javascript

jquery

html

css

slick.js