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

Asked 28/8, 2015 at 9:40 Answered 11/1, 2021 at 10:44

Solved javascript jquery css carousel slick.js

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.)

Connel answered 28/8, 2015 at 9:40 Comment(1)

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) – Connel 28/8, 2015 at 9:47

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.

Connel answered 28/8, 2015 at 20:18 Comment(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.

Whitacre answered 28/8, 2015 at 9:56 Comment(1)

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. – Connel 28/8, 2015 at 18:52

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

Epidemic answered 11/1, 2021 at 10:44 Comment(0)

Recommended topics

Hot tags