我正在尝试使用slick
库实现Slider Syncing。我有一组来自后端的名为pictures
的图像。我循环遍历这些图片,将其填充到我的slider-for
和slider-nav
div下。
HTML code:
<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
循环。)
答案 0 :(得分:6)
让我提一下,我的这个代码会进入一个默认情况下不活动的选项卡。我认为当标签变为活动状态时,图像div的宽度计算不会发生。如果在页面加载时默认为活动选项卡,则它可以正常工作,而不是其他方式。这是因为bootstrap使用display:none
来处理隐藏的选项卡,并且无法使用display:none
获取选项卡的宽度。
我找到了解决方案here。
在我设置所有这些标签的主页面中,我插入了以下代码:
.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解决方案更改了在bootstrap中处理隐藏标签的方式。
答案 1 :(得分:0)
我还不能评论,所以我把它作为答案。
有些事情可能是错的,但它可能与您在slick.js或jQuery中加载的方式有关。
它是否会在您的控制台中出现任何错误?我前一段时间遇到过同样的问题(Slick Carousel Uncaught TypeError: $(...).slick is not a function)。最后我发现我包含了两个版本的jQuery,其中一个版本非常陈旧。
答案 2 :(得分:0)
当光滑的滑块位于基础选项卡内时发生这种情况,默认情况下未打开。
这段代码修复了它
myApi.interceptors.response.use(
response => response,
error => {
/* THE ERROR MESSAGE IS DISPLAYED BEFORE
* THE INTERCEPTOR CONSOLE.LOG
*/
console.log(error);
}
);