slick的滑块图像只在单击slick箭头之后才加载。
我正在尝试使用slick库实现Slider同步。我有一个名为pictures的图像数组来自后端。我循环这些图像，在我的slider-for和slider-nav div下填充它们。
HTML代码：
<head>
<style>
.slick-arrow {
color: #666666;
background: red;
}
.slider-for {
max-width: 960px;
margin-left: auto;
margin-right: auto;
margin-top: 5%;
}
.slider-nav h1 {
display: inline-block;
}
.slider-nav .slick-slide {
text-align: center;
width: 337px;
}
.container {
margin-bottom: 5%;
margin-top: 5%;
}
</style>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.7/slick-theme.css"/>
</head>
<div class="container-fluid padding25">
<h2>Pictures</h2>
<div class="slider-for">
<% var index = 0;%>
<%_.each(pictures, function(picture) { %>
<div>
<img src="<%=picture.pictureUrl%>" class="img-rounded" width="460" height="345"/>
</div>
<%
index++;
});
%>
</div>
<div class="slider-nav">
<%_.each(pictures, function(picture) { %>
<div>
<img src="<%=picture.pictureUrl%>" class="img-rounded" width="150" height="300"/>
</div>
<%
index++;
});
%>
</div>
<div class="row">
<h2>Videos</h2>
...
</div>
</div>javaScript：
<script type="text/javascript" src="/slick-1.5.7/slick/slick.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
console.log("inside docready");
$('.slider-for').slick({
slidesToShow: 1,
slidesToScroll: 1,
fade: true,
asNavFor: '.slider-nav',
});
$('.slider-nav').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: true,
asNavFor: '.slider-for',
dots: true,
centerMode: true,
centerPadding: '3%',
focusOnSelect: true,
});
$('.single-item').slick({
dots: false,
arrows: true,
});
});
</script> 在页面加载的slider-nav中只有一个图像可见。在单击左/右slick-arrow时，图像将正确显示。我试图用jsFiddle编写相同的代码。但我认为它在那里运行得很好(不确定是否因为我没有在那里使用for循环)。
回答 3
Stack Overflow用户
发布于 2015-08-28 20:18:11
让我提到，我的这段代码进入一个默认情况下不活动的选项卡。我认为，当选项卡处于活动状态时，图像div的宽度计算不会发生。如果在页面加载时，默认情况下这是活动选项卡，则该选项卡可以正常工作，否则不工作。这是因为引导程序使用display:none来处理隐藏的选项卡，并且不可能使用display:none获取选项卡的宽度。我找到了解决方案这里。
在设置所有这些选项卡的主页中，我插入了以下代码：
.tab-content > .tab-pane,
.pill-content > .pill-pane {
display: block; /* undo display:none */
height: 0; /* height:0 is also invisible */
overflow-y: hidden; /* no-overflow */
}
.tab-content > .active,
.pill-content > .active {
height: auto; /* let the content decide it */
}我遵循CSS解决方案来改变引导中处理隐藏选项卡的方式。
Stack Overflow用户
发布于 2015-08-28 09:56:34
我还不能对此发表评论，所以我给出了答案。
有一些事情可能是错误的，但这可能与您在slick.js或jQuery中加载的方式有关。
- 您正在使用最新版本的jQuery吗？
- 您正在使用最新版本的slick.js吗？
- jQuery是否在slick.js之前加载？
在您的控制台中会出现错误吗？不久前，我也遇到了同样的问题(巧妙的TypeError：$(.).slick不是函数)。最后，我发现我包含了两个版本的jQuery，其中一个版本非常老。
Stack Overflow用户
发布于 2021-01-11 10:44:04
这发生在我的时候，光滑的滑块是在一个基础标签，这不是默认打开。
这段代码修复了它
$('.accordion-item').on('click', function (e) {
$(".my_slick_gallery").slick('setPosition');
});https://stackoverflow.com/questions/32267953
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号