CODEWITHSUNDEEP
javascripthtmlcsssliderslick.js
Gabriel Souza
Gabriel Souza

Reputation: 1015

Slick slider empty space with fluid background image

I'm using Slick slider to show some fuid background images, but each new image added ("slide-img" class), a empty space is added on top and bottom of the slider.

I think that the padding-top is causing this some way, but i don't know how to fix it maintaining the fluid effect, i would be grateful if someone knows.

Here is the JSFiddle

$('.slides').slick({
    slidesToShow: 1,
    autoplay: true,
});
.slide-img {
  background: url('http://i.imgur.com/RVfIr7W.jpg') no-repeat center / 100%;
  padding-top: 36.59%;
}
<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>

  <div class="slides">
    <div class="slide-img"></div>
    <div class="slide-img"></div>
    <div class="slide-img"></div>
  </div>
  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>

Upvotes: 1

Views: 3633

Answers (1)

user500665
user500665

Reputation: 1362

Slick creates a wrapper for the slides and puts them side by side, so when you use padding on the slide itself it will calculate the percentage based on the width of all the slides put together.

You need to add an internal div to put the padding on, this way it takes the percentage of a single slide and you will get the height you are looking for.

  <div class="slides">
    <div><div class="slide-img"></div></div>
    <div><div class="slide-img"></div></div>
    <div><div class="slide-img"></div></div>
  </div>

https://jsfiddle.net/ke51vqqm/3/

Upvotes: 2

Related Questions