Slick – Embedding Photoswipe plugin

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;”.





  • We realised the cause for this issue.
  • We also got to know that, this issue happens when used in bootstrap non-active tabs  (
  • 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.



This awesome jQuery plugin is developed by kenwheeler. For more Advanced Usages, please check the demo page or visit the official website.
UI/UX Designer,
Mallow Technologies.

Leave a Comment

Your email address will not be published. Required fields are marked *