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

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.