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

Solution 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');
    elseinitSlider(target);
  });

This way you are also only initializing the slider only once.

See this fiddle for a demo of the working solution.