I'm trying to implement Slider Syncing using slick library. I have an array of images called pictures ing from the backend. I loop over these images to populate them under my slider-for and slider-nav divs.
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/jquery.slick/1.5.7/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr/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>
Only one image is visible in the slider-nav on page load. On clicking left/right slick-arrow, the images appear properly. I tried to write the same code in jsFiddle. But I think it works well there (Not sure if its because I have refrained from using for loop there.)
I'm trying to implement Slider Syncing using slick library. I have an array of images called pictures ing from the backend. I loop over these images to populate them under my slider-for and slider-nav divs.
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/jquery.slick/1.5.7/slick.css"/>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr/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>
Only one image is visible in the slider-nav on page load. On clicking left/right slick-arrow, the images appear properly. I tried to write the same code in jsFiddle. But I think it works well there (Not sure if its because I have refrained from using for loop there.)
-
One more strange thing I just observed is if I press F12 to get to dev tools, it triggers the
slider-navimages to load properly. (without clicking any slick-arrows) – A.R.K.S Commented Aug 28, 2015 at 9:47
3 Answers
Reset to default 9Let me mention that this code of mine goes into a tab which is not active by default. I figured that the width calculation of the image divs is not happening when the tab bees active. If this was the active tab by default when the page loads, it works fine and not otherwise. This is because bootstrap uses display:none to handle hidden tabs and its not possible to get the width of tabs with display:none.
I found the solution here.
In my main page where all these tabs are being set up, I inserted this code:
.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 */
}
I followed the CSS solution to change the way hidden tabs are handled in bootstrap.
I can't ment yet, so I give it as an answer.
There are a few things that could be wrong, but it will probably have something to do with the way you load in slick.js or your jQuery.
- Are you using the latest version of jQuery?
- Are you using the latest version of slick.js?
- Is jQuery being loaded BEFORE slick.js?
Does it give any errors in your console? I've had the same problem a while ago (Slick Carousel Uncaught TypeError: $(...).slick is not a function). Ultimately I found out that I included two versions of jQuery, of which one was very old.
This happened to me when the slick slider is inside a foundation tab, which is not opened by default.
This code fixed it
$('.accordion-item').on('click', function (e) {
$(".my_slick_gallery").slick('setPosition');
});