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

 

slick_correct

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.

slick_correct

Codepen:

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

Leave a Reply

%d bloggers like this: