Search code examples
csscenteringslick.js

Vertically & Vorizontally center Slick Slider in Viewport

I have read the posts on CSS centering and JS centering.

BUt I am trying to center Slick slider so it sits centrally in the viewport and it is always full visible within the viewport.

The images are all square and I want to get it so the slider always sits in the middle with a fixed minimum page margin.

So if the page is landscape it will centralise horizontally and the slider shrinks to the suitable height.

If the page is portrait it centralise horizontally and the slider shrinks to the suitable width.

I have got it so that the second condition is true, but I cannot get this to work to then make sure the landscape slider doesn't expand.

If I were doing this with fixed content it would be easy, but using the slick slider, when I try other methods of centralising totally within the viewport it breaks.

See the example here: http://www.edwardmccann.studio/2018/index.php/

Any pointers would be greatly appreciated.

Thanks

Solution

  • Since you provide your site link, so I just made few changes and see how this looks now

    .slider img {
    max-height: 80vh;
    width: auto;
    margin: 0 auto;
}

.slider{
    max-height: 80vh !important;
    width: 50vw;
    overflow: hidden;
}
.slider .slick-slide{
    line-height: 80vh;
}

    enter image description here

    I believe this is what you want to achieve here