Carousel responds to changes in viewport width but not viewport height

[maxhartshorn]

There may be cases when height media queries cause the carousel's width to change (for example if a sidebar is removed below a certain height and the carousel expands to take up the remaining width). I would argue that slick.js should respond to this. I can create a pull request for this if the main author(s) agree. Something like the below code:

$(window).on('resize.slick.slick-' + _.instanceUid, function() {
            if ($(window).width() !== _.windowWidth || $(window).height() !== _.windowHeight) {
                clearTimeout(_.windowDelay);
                _.windowDelay = window.setTimeout(function() {
                    _.windowWidth = $(window).width();
                    _.windowHeight = $(window).width();
                    _.checkResponsive();
                    _.setPosition();
                }, 50);
            }
        });

[desandro]

You might want to try Flickity. Flickity uses the size and positioning you set with your own CSS. It listens to the window resize event and resizes accordingly. So you can use media queries no problem. See this demo: http://codepen.io/desandro/pen/QwBKzw

[tcwebmaster]

+1 for this enhancement and thanks, @maxhartshorn :)

I'm using Slick with iframe videos and need to make sure the whole video is visible regardless of both height and width considerations.

I'm using media queries to do this but without this enhancement it's easy to run into situations where the video width changes while the height remains the same, clipping content in the process.