Foundation Reveal and Slick Carousel

I was working on a website using Foundation Framework. It requires a slideshow on a modal window, which I made use of components that comes with foundation – Reveal and Orbit slider.

I’ve used orbit on a few projects. However problem is encountered when working on this particular project, which I believe is due to its use in conjunction with Reveal. The slideshow works perfectly upon loading. But for some unknown reason it stopped working after a while – no response and images won’t slide. You need to reload the page again to make it working again.

Upon checking for solution,Ii came across announcement that orbit has been deprecated. Of course i couldn’t find any solutions and I had to look for alternatives since there will be no further development on this component.

Based on the suggestion from the post, i tried bxSlider and slick. Both worked perfectly until the slideshow is added to Reveal. Image height is zero!

The problem

Slider height is zero in reveal.

The solution

Thankfully I found a solution, originally an orbit slider problem and can be applied to slick.

<script>
    $(document).foundation();
    $('.reveal-modal').on('opened', function() {
        $(window).trigger('resize');
    });
    $(document).ready(function() {
        $('.slick').slick();
    });
</script>

Note lines 3-5: this is the magic code that makes it works!

Please note that this works with slick but not with bxSlider. If you know the solution to make it work with bxSlider, please leave it in comments.

If you have used other jquery based carousel or slider that works with Reveal, please let me know in comments too!

One thought on “Foundation Reveal and Slick Carousel

  1. Toni Liem Reply

    Did you encounter problem with responsive image? Please email me (toni.xm@gmail.com) if it works on your part? Anyway i am using bxSlider.

Leave a Reply

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