Using slick.js carousel and lazy loader to display a fullscreen image carousel

Question

I'm using slick.js carousel with the inbuilt lazy loading functionality to display a fullscreen image gallery. The one problem I have is that lazy loader only displays using an img tag so I can't apply background-size:cover to it and I don't want to overkill it by using a js plugin to make it fullscreen. Does anyone have any ideas?

Answer 1

You really should be using the img tag. You can not use the lazy loading on div tags, since slick only adds the lazy loading effect to img tags having a data-lazy attribute set. From the plugin's source:

$('img[data-lazy]', _.$slider).not('[src]').addClass('slick-loading');

All you need to do is to put each of your img tags in a div tag:

<div class="a-slide">
    <img data-lazy="http://lorempixel.com/800/800/animals/"/>
</div>

Then, just as you did, set your html, body and div tags height and width to 100%. But do not forget to put your img tags heght and width to 100% too, since now you have them. Besides, you don't even need background-size:cover. However, if you want your images to not lose too much of their quality, use object-fit: cover; on them. Your css would be similar to this:

html{
    height: 100%;
    min-height: 100%;
}

body{
    height: inherit;
    width: inherit;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.a-slide{
    height: inherit;
    width: inherit;
}

.a-slide img {
    height: inherit;
    width: inherit;
    object-fit: cover; /* This is a new property that can be used on img tags */
}

Then call the slick plugin as you must with the lazyLoad setting set to ondemand or progressive:

$('.lazy-slick').slick({
    lazyLoad: 'ondemand'
});

Working demo

If that's not exactly the expected behaviour, don't hesitate to say.