滑块图像只有在点击滑块箭头后才能加载
slick's slider images load only after clicking a slick-arrow
我正在尝试使用slick
库实现滑块同步。我有一个数组的图像称为pictures
来自后端。我循环遍历这些图像,将它们填充到slider-for
和slider-nav
div下。
<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
循环)
让我提一下,我的这段代码进入了一个默认情况下不活动的选项卡。我认为图像div的宽度计算不发生时,选项卡变得活跃。如果这是默认情况下加载页面时的活动选项卡,那么它可以正常工作。这是因为bootstrap使用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解决方案来改变隐藏选项卡在bootstrap中的处理方式。
我还不能评论,所以我给出一个答案。
有一些事情可能是错误的,但它可能与你加载slick.js或jQuery的方式有关。
- 您使用的是最新版本的jQuery吗?
- 您是否使用最新版本的slick.js?
- jQuery是否在slick.js之前加载?
是否在控制台中显示任何错误?我之前也遇到过同样的问题(Slick Carousel Uncaught TypeError: $(…))。Slick不是一个函数)。最后,我发现我包含了两个版本的jQuery,其中一个非常旧。
这种情况发生在我身上,当光滑滑块在基础选项卡内,默认情况下不打开
这个代码修复了它
$('.accordion-item').on('click', function (e) {
$(".my_slick_gallery").slick('setPosition');
});
相关文章:
- 如何在谷歌字体加载时显示加载图像
- 预加载图像并插入DOM
- 加载图像时加载图标
- 在页面启动期间加载图像
- 预加载图像image.onload脚本MVC
- 可以't在我的React组件中加载图像
- 加载图像后调整HTML画布的大小
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- 错误:$injector:modulerr加载图像时模块处于角度
- 谷歌地图加载后隐藏加载图像
- 在照片查看器(Javascript和jQuery)中异步加载图像时可能出现错误
- 正在从字节数组加载图像内容
- 网页上已有tinymce加载图像列表
- 单击提交按钮后加载图像将冻结
- 如何使用Express'正确加载图像;s的静态中间件
- 使用jquery即时加载图像
- Html5画布使用JCanvasScript加载图像
- Javascript使用JCanvaScript在画布中加载图像
- 使用jquery/ajax显示加载图像
- ajax缓存false无法加载图像