Slick is basically a jQuery plugin for creating responsive, customisable and mobile friendly carousels/sliders. Slick is chosen to embed the photoswipe plugin for popup gallery.
But when slick is used in a collapse, the Photoswipe plugin does not load properly. The images stay in a column(vertically). This issue is a major concern, as most of the sites uses collapse and slick together. In this post I will explain the way to rectify the issue.
Issue Faced
- While using slick inside a collapse, slick does not work properly.
- We used the collapse function which came with the template.
- In the template they had used “slideToggle” function for collapse.
- Where as in slideToggle, it toggles between “display : none; & display: block”.
- The issue arises only when “display : none;”.
Codepen:
Solution:
- We realised the cause for this issue.
- We also got to know that, this issue happens when used in bootstrap non-active tabs (https://github.com/kenwheeler/slick/issues/341).
- From the above reference we got an idea on how to remove this issue.
- We used collapse function in bootstrap framework.
- There we just changed “ display: none to display: block” , and to hide the container we added the style “height: 0px; overflow:hidden” for the class “ collapse ”.
- Voila, now slick get it’s dimensions and works fine.
Codepen: