CODEWITHSUNDEEP
jquery
rablentain
rablentain

Reputation: 6735

Getting Slick image slider to always cover as background

I am using Slick as a full width background slider. I just want a slideshow that is covering the whole background. My problem here is that the images seems to only adjust automatically to the width of the page. This means that if the browser gets too narrow, the image will not cover the whole height. I wonder if there is some good way of adjusting the image size to always cover the background. I want the image to either overflow horizontally or vertically depending on the browsers aspect ratio.

The div displaying the slider is styled as:

#background {
    position: fixed;
    z-index: -2000;
    top:0;
    left:0;
    width:100%;
}

I have a jquery solution which seems to work but I do not really know if this is a good solution:

$($('#background').find('img').first()).on('load', function(){
    var bgWidth = 
        $(window).height() / 
        $('#background').find('img').first().height() *
        $('#background').find('img').first().width();

    // Initiate background slider
    $('#background')
        .slick({
            dots: false,
            autoplay: true,
            autoplaySpeed: 6000,
            pauseOnHover: false,
            fade: true,
            arrows: false,
            mobileFirst: true,
        })
        .css({
            'height':'100%',
            'min-width': bgWidth,
        });
});

Is there a better solution out there or is this good enough?

Upvotes: 2

Views: 12603

Answers (3)

bensentropy
bensentropy

Reputation: 1443

As slider tries to adjust images itself, another option is to apply the slider to an element that isn't an img tag and place your image inside that container, For example:

HTML:

<div class="slider">
    <div>
        <img src="images-01.png">
    </div>
    <div>
        <img src="images-02.png">
    </div>
</div>

CSS:

.slider div {
    height: 100%; 
    width: 100%; 
}
.slider div img{
    height: 100%; 
    width: 100%; 
    object-fit: cover;
}

JS

$('.slider').slick({
    autoplay: true,
    autoplaySpeed: 2000,
});

Upvotes: 2

ReynBargz
ReynBargz

Reputation: 1

This will make your slick slider a background full-width slider.

on slider.css go to line 2, and under .slick-slider add the following rule:

position: absolute !important;  width: 100%;  z-index: -1;

Then, on your html:

<div class="slider">
 <div class="a-slide slide1"></div>
 <div class="a-slide slide2"></div>
</div>

add this css also

.a-slide { height: 100%; width: 100%; background-size: cover !important;}
.slick-slider{ height: 100%;}
.slide1 {background:url(../img/slider01.png) no-repeat center;}
.slide2 {background:url(../img/slider01.png) no-repeat center;}

Upvotes: 0

Carles Jove i Buxeda
Carles Jove i Buxeda

Reputation: 701

height = 100% is relative to the container element, so unless all the parent elments of #background have height set to 100% too, it won't work. So, if you want a CSS-only solution, you need something in the lines of:

html, body, .another-element, #background {
  height: 100%;
}

Assuming a markup like:

<html>
  <body>
    <div class="antoher-element">
      <div id="background">

However, I don't see a problem with your solution, unless, of course, that it won't work without JS.

Upvotes: 0

Related Questions