Slick Slider - Box Shadows are cut off

Question

The problem is that the slick slider div has overflow: hidden; so the box-shadows of the slides divs keep getting cut off.

Anybody ran into this problem too?

Here is a little fiddle demonstrating the problem: https://jsfiddle.net/2zvcud0u/

HTML

  <div class="slider row">
    <div class="col-sm-4">
      <div class="drop-shadow">
        <div class="content">
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="drop-shadow">
        <div class="content">
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="drop-shadow">
        <div class="content">
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="drop-shadow">
        <div class="content">
          <p>Lorem ipsum dolor sit amet</p>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.row{
  margin: 20px 0;
}

.drop-shadow {
  box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.35);
}

.content{
  margin: 10px;
}

JS

$('.slider').slick({
  autoplay: false,
  dots: false,
  arrows: false,
  infinite: false,
  speed: 300,
  slidesToShow: 3,
  slidesToScroll: 1,
  swipeToSlide: true,
  responsive: [{
    breakpoint: 992,
    settings: {
      slidesToShow: 2
    }
  }, {
    breakpoint: 768,
    settings: {
      slidesToShow: 1
    }
  }]
});

Thanks for any suggestions

Khz

This answer did the trick for me: #30999576 – Chlores

Answer 1

Alright folks, i think i found a quiet easy solution.

We put a wrapper div around the slider with following CSS:

.slider-wrapper {
    width: calc(100% + 30px); //we need more width for the shadows on the edges
    padding: 0 15px; //space for the shadows
    margin-left: -15px; //put the div in its original position
    overflow: hidden; //hide the overflow
}

We make the slick-list div overflow visible:

.slick-list {
  overflow: visible;
}

Thats it for the first part.

Another problem is that the box-shadow of the first element in the overflow is still visible.

This should fix it:

.slick-slide .drop-shadow {
  box-shadow: none; //no shadow for a hidden slide
  transition: box-shadow 0.1s ease-in-out; //little effect to fade the shadow
}

.slick-slide.slick-active .drop-shadow {
  box-shadow: 0px 0px 43px 0px rgba(0, 0, 0, 0.35); //only the active slides have the shadow
}

Here's another demo fiddle: https://jsfiddle.net/cc5fmwaL/2/

I hope i could help someone out and feel free to revise this quick solution.

Khz

Answer 2

An easier solution could be this:

.slick-list {
  box-sizing: initial;
  padding: 25px 0px;
}

Fiddle: https://jsfiddle.net/wouterhendriks/7hu4vj6L/

Measurement

Answer 3

I'm not sure if there are any side effects, but I changed the slick.js source from

.css({
    'width':(100 / _.options.slidesPerRow) + '%',
    'display': 'inline-block'
});

to

.css({
    'width':(98 / _.options.slidesPerRow) + '%',
    'display': 'inline-block'
});

This will leave some space for horizontal box shadow

Pickford

Generally you don't want to edit the source, since that's susceptible to getting overwritten, for example during an update. – Propagable

Answer 4

One of the easiest solution i found is:

.slick-list {
  margin: 0 -24px;
  padding: 24px;
}

margin/padding values could be given based upon the blur value you want to add.

Distemper