Menu icon Foundation
Slick Slider inside Reveal Modal - resize required

Hi

I'm not sure if this is a Foundation issue or a slick one, but I have two sliders within a reveal modal, and have to resize the window in order for the images to load.

I've seen a couple of supposed fixes, along the lines of

But it's not working. Any help would be appreciated.

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

revealFoundationSlick Slider

Hi

I'm not sure if this is a Foundation issue or a slick one, but I have two sliders within a reveal modal, and have to resize the window in order for the images to load.

I've seen a couple of supposed fixes, along the lines of

But it's not working. Any help would be appreciated.

$(document).foundation();
$('.reveal-modal').on('opened', function() {
    $(window).trigger('resize');
});
$(document).ready(function() {
    $('.slick').slick();
});
Rafi Benkual over 4 years ago

There is a reflow function to look for content added after the page loads http://foundation.zurb.com/docs/components/reveal.html#adding-new-reveal-content-after-page-load

Atle Lillehovde over 4 years ago

I've had the same problem, both with Slick and ResponsiveSlides, and have tried the resize trigger in many different forms but to no avail.

To make Slick (and ResponsiveSlides) work, instead of trying to trigger a resize, I inititated the slideshow after the reveal was opened, like so:

$('.reveal-modal').on('opened', function() {
    $('.slider').slick({
        infinite: true,
        speed: 300,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        appendArrows: '.slider-nav',
        prevArrow: '<span class="nav-prev icon-chevron-left"></span>',
        nextArrow: '<span class="nav-next icon-chevron-right"></span>'
    });
});

I'm a copy and paste-coder when it comes to jQuery and js, and I have to initiate the slideshow again when I want it outside of a modal.

Any feed-back on wether this solution has performance drawbacks is highly appreceiated.

Andrew Walpole over 4 years ago

Try this instead:

$('.reveal-modal').on('opened', function() {
    $('.slider').slick("setPosition", 0);
}); 

This causes the slider to re-draw itself which allows the images to pop in.

Christina Giannouli over 4 years ago

Hello,

I had the exact same issue with Flexslider. Here is what I did to solve the issue in case it helps:

 $(document).on('opened.fndtn.reveal', '[data-reveal]', function() {

    $(window).trigger('resize');

});

$(document).ready(function(){

    $('.flexslider').flexslider({
          //options
    });

});

Also note that since Foundation version 5.4 the un-namespaced "open", "opened", "close" and "closed" events are fully deprecated. Use the namespaced "open.fndtn.reveal", "opened.fndtn.reveal", "close.fndtn.reveal" and "closed.fndtn.reveal" events instead.

http://foundation.zurb.com/docs/components/reveal.html

I hope this helps. :)

Martin Luna almost 4 years ago

This worked for me. Currently developing a WordPress Theme with Foundation 5 and slick slider.

    $(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
        var modal = $(this);

        $('.slider').slick({
            slide: '.slider-item',
            arrows: true,
            dots: true,
            appendArrows: '.slider .slider-nav',
        });
    });

    $(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
        var modal = $(this);
        $('.slider').slick('unslick');
    });

Events binding
http://foundation.zurb.com/docs/components/reveal.html

Jeremy Englert almost 4 years ago

The solution from @Martin Luna works great. However, as Reveal is loading, you will briefly see all of the images inside of Slick "flash" before the appropriate classes are injected to hide them. Add the following to your CSS to get rid of that "flash".

// Hide images while Reveal fires
.slider li:not(:first-child) {
    opacity: 0;
}

// Display images after Reveal fires
.slick-track li:not(:first-child) {
    opacity: 1;
}

Daniel Hay over 3 years ago

For some reason none of the above recommendations worked for me. In the end I added the below code and slick finally worked.

$('[data-reveal]').on('open.zf.reveal', function() {
    $('.slick-slider').resize();
});

york about 3 years ago

With a 100 ms timer is arranged.

var timeout;
$(document).on('opened.fndtn.reveal', '[data-reveal]', function () { clearTimeout(timeout); timeout = setTimeout(function() { $('.slider').slick({ slide: '.slider-item', arrows: true, dots: true, appendArrows: '.slider .slider-nav', });
});
$('.MP_carousel').css('opacity', '1'); }); $(document).on('closed.fndtn.reveal', '[data-reveal]', function () { var modal = $(this); $('.slider').slick('unslick');
$('.MP_carousel').css('opacity', '0') });