slick's slider images load only after clicking a slick-arrow

Question

I'm trying to implement Slider Syncing using slick library. I have an array of images called pictures coming 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.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>

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-nav` images to load properly. (without clicking any slick-arrows) — A.R.K.S, Aug 28 '15 at 09:47

score 9 · Accepted Answer · answered Aug 28 '15 at 20:18

Let 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 becomes 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.

score 0 · Answer 2 · edited May 23 '17 at 12:02

0

I can't comment 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.

edited May 23 '17 at 12:02

Community

1
1

answered Aug 28 '15 at 09:56

Sanderfish

1,200
1
10
14

I have the latest versions of slickjs, slick. css and jQuery. I dont get any such error on console. I have imported jQuery before slick.js in layout.ejs file. – A.R.K.S Aug 28 '15 at 18:52

score 0 · Answer 3 · answered Jan 11 '21 at 10:44

0

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');
    });

answered Jan 11 '21 at 10:44

Matoeil

5,944
9
47
69

slick's slider images load only after clicking a slick-arrow

3 Answers3