Menu icon Foundation
Foundation Clearing Lightbox with Slick Carousel

Hi,
I'm trying to use Slick with Foundation's Clearing Lightbox but am not having much luck.
My html is as Foundation requires, and Slick is working fine with the list-items ie. the images are sliding fine with a ul.
However, when I click on an image, Clearing Lightbox is not firing correctly (and I think it may be because of the extra elements Slick places within the ul) and the slick slider disappears: Uncaught TypeError: Cannot read property 'templates' of undefined.

I then tried placing the data-clearing attribute onto the li's parent div (which is inserted by Slick) and it just links off to the image, instead of firing Clearing Lightbox.
If I remove Slick, then Clearing Lightbox works as expected, however I really need the image carousel.

Have you any suggestion for getting these libraries to play nicely together?

https://github.com/kenwheeler/slick/issues/796

clearing lightboxclearinglightboxslickslider

Hi,
I'm trying to use Slick with Foundation's Clearing Lightbox but am not having much luck.
My html is as Foundation requires, and Slick is working fine with the list-items ie. the images are sliding fine with a ul.
However, when I click on an image, Clearing Lightbox is not firing correctly (and I think it may be because of the extra elements Slick places within the ul) and the slick slider disappears: Uncaught TypeError: Cannot read property 'templates' of undefined.

I then tried placing the data-clearing attribute onto the li's parent div (which is inserted by Slick) and it just links off to the image, instead of firing Clearing Lightbox.
If I remove Slick, then Clearing Lightbox works as expected, however I really need the image carousel.

Have you any suggestion for getting these libraries to play nicely together?

https://github.com/kenwheeler/slick/issues/796

Niall O'Brien about 5 years ago

Anyone?

Bharat almost 5 years ago

I am having the same problem :(

Arlan T over 4 years ago

same problem, clearing is not playing nice with slick

Arlan T over 4 years ago

fixed by adding modernizr.js file

Hani over 4 years ago

@Arlan T - I made sure modernizr.js was added and it's still not working for me. Did you do anything else that was unique? My code is as follows, do you see anything that would be causing the issue?

<ul class="slick-carousel clearing-thumbs" data-clearing>
    <li><a href="/path/to/img1.jpg"><img src="/path/to/img-thumb1.jpg"></a></li>
    <li><a href="/path/to/img2.jpg"><img src="/path/to/img-thumb2.jpg"></a></li>
    <li><a href="/path/to/img3.jpg"><img src="/path/to/img-thumb3.jpg"></a></li>
    <li><a href="/path/to/img4.jpg"><img src="/path/to/img-thumb4.jpg"></a></li>
</ul>

When I click on one of the items, I get a javascript error:

TypeError: settings is undefined in foundation.min.js (line 2690, col 12)
viewing : settings.templates.viewing

Andrew Dodson over 4 years ago

@Hani AbuGhazaleh did you ever resolve this problem? I am having the exact same issue.

Hani over 4 years ago

Unfortunately not @Andrew Dodson. I ended up not using a lightbox with the carousel. :(