加载滑块后 Slick.js 破坏样式 [英] Slick.js breaking styling after loading a slider

问题描述

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

上图应该能让您直观地了解我要实现的目标.小绿框将是旗帜，我很确定你可以解决其余的问题.滑块将一次显示多张幻灯片，您可以向左或向右单击以显示列表中的下一张.

问题:当点击标志时，每个滑块都被替换为新的滑块，新的滑块可以随机工作，而且在单击标志之间时，我会发现滑块堆叠在一起并且显示不正确.

这是我所拥有的...(HTML):

 jQuery(document).ready(function($) {函数initSlider(目标){$(target).slick({点:假，无限:真实，速度:300，自动播放:真实，幻灯片显示:1，自适应高度:真});}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('隐藏');initSlider(目标)；});$('.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('隐藏');initSlider(目标)；});});

<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="容器"><div class="row"><div class="col-md-12"><h4>团队</h4>

<div class="col-md-12"><div class="team-slider team-uk" data-slick='{"slidesToShow": 3, "slidesToScroll": 1}'><!-- 团队成员幻灯片--><div class="team-player col-xs-12 col-md-4"><img class="center-block" src="/img/andy.png"/><p class="lead">安迪</p><p>首席技术官</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 class="team-slider team-usa hidden" data-slick='{"slidesToShow": 3, "slidesToScroll": 1}'><!-- 团队成员幻灯片--><div class="team-player col-xs-12 col-md-4"><img class="center-block" src="/img/andy.png"/><p class="lead">美国队</p><p>首席技术官</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>

<!-- 团队成员幻灯片结束--><!-- 重复-->