Slick: Carousel doesn't seem to behave if placed within a modal window

[leecollings]

I have two instances of of the carousel on my page, in which the code and the JS call is identical. The only difference is that one instance is within a prettyPhoto modal window.

When used with this modal, the carousel breaks, and instead of allowing slides to 'slide', they just appear bunched up next to each other.

[kenwheeler]

Your issue is likely that the carousel is hidden when initialized and dimensions are not properly calculated. If you are on 1.4, you can call yourcarousel.slick('setPosition') when the modal is shown to fix this.

[leecollings]

Like this? As I can't see any difference with this

// Pretty Photo
$("a[rel^='prettyPhoto']").prettyPhoto({
    theme: 'facebook',
    social_tools: false,
    show_title: false
}, function() {
    $('.slick-carousel').slick('setPosition');
});

Am I hooking into it correctly?

[kenwheeler]

I'm unfamiliar with the prettyphoto api. Is the second argument a loaded or initialize callback?

Things look good on the slick side, provided you are up to date.

[leecollings]

There's this, if this helps you? http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/documentation Sorry but I don't know what kind of callback they are.

Just checked the slick.min.js file, and that shows as 1.4.1, which I assume is the latest?

Just to give my opinion, I think what's happening is although the carousel is showing up inside the modal, it still seems to be taking it's width and dimensions from the browser window size, rather than the size of the modal.

[kenwheeler]

Well if your theory is correct, you can use the respondTo option that slick provides and set it to 'min'. From my experience, slick in modals needs a manual position set call. Does interacting with slick fix its layout?

[kenwheeler]

Also, your lightbox doesn't seem to have a callback method for loaded state. You may want to explore a more robust alternative such as http://fancybox.net/api

[leecollings]

Did you not hear about the massive security flaw in FancyBox and Wordpress recently?

[kenwheeler]

I typically roll my own modals. I just remembered it as a go to from a couple years back.

[kenwheeler]

Ahh that's the Wordpress plugin, not the actual lib. And its been patched since.

[leecollings]

Hey, so I've changed to fancybox, and have the JS like this

// FancyBox
$(".fancybox-thumb").fancybox({
    prevEffect : 'none',
nextEffect : 'none',
helpers : {
        title : {
    type: 'outside'
        },
        thumbs : {
    width : 50,
    height : 50
        }
    },
    afterLoad: function(){
        $('.slick-carousel').slick('setPosition');
    }
});

But this seems to be loading the modal in a very small size, until the browser is resized, then it seems to appear as full width.

It's hard to explain, and also hard to understand why. Would you be willing to take a look at it, if i I put it up live somewhere?

[kenwheeler]

Sure

[leecollings]

http://dev.bellavou.co.uk/body/thigh-lift/#before-after

The images shown here, are a responsive instance of the carousel, and this seems to work okay. These are each linked to a fancybox modal, inside of which has a slick container, and inside that is a foreach loop of one instance of this image comparison slider plugin (http://codyhouse.co/gem/css-jquery-image-comparison-slider/)

If you'd like to know anything, or see anything else code wise, please just ask. I appreciate you taking the time to look at this

[leecollings]

Hmm I've got a bit of an update actually, trying to do things a different way, and not use a modal. If you look at http://dev.bellavou.co.uk/body/thigh-lift/#before-after I've got the carousel at the bottom, and two comparison sliders ontop.

Is there way I can click on the carousel thumbnails, and have one instance of that particular comparison above it whilst the others are hidden?

[leggomuhgreggo]

Looks like this is dormant. Im going to close, but feel free to circle back if youd like! Thanks

[MikeDevice]

I have a similar problem. I initialize slick in a modal window and when I open it I see that slick carousel is not visible. I've found out that slick carousel selector has zero width. Why? Modal window's width is zero when it closed (it has display: none) and when I open it, modal width change from zero to 500px but slick still has no width.