光滑的滑块 - 盒子阴影被切断答案

【问题标题】：Slick Slider - Box Shadows are cut off光滑的滑块 - 盒子阴影被切断
【发布时间】：2017-11-16 08:47:01
【问题描述】：

问题是光滑的滑块 div 有 overflow: hidden; 所以幻灯片 div 的框阴影不断被切断。

有人也遇到过这个问题吗？

这是一个演示问题的小技巧： 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;
}

$('.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
    }
  }]
});

感谢您的任何建议

【问题讨论】：

这个答案对我有用：stackoverflow.com/questions/30999076/…

标签： javascript jquery html css slick.js

【解决方案1】：

好吧，伙计们，我想我找到了一个安静简单的解决方案。

我们使用以下 CSS 在滑块周围放置一个包装 div：

.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
}

我们让 slick-list div 溢出可见：

.slick-list {
  overflow: visible;
}

这就是第一部分。

另一个问题是溢出中第一个元素的 box-shadow 仍然可见。

这应该可以解决它：

.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
}

这是另一个演示小提琴： https://jsfiddle.net/cc5fmwaL/2/

我希望我可以帮助某人并随时修改这个快速解决方案。

【讨论】：

【解决方案2】：

一个更简单的解决方案可能是这样的：

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

小提琴：https://jsfiddle.net/wouterhendriks/7hu4vj6L/

【讨论】：

【解决方案3】：

我不确定是否有任何副作用，但我从

更改了 slick.js 源

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

到

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

这将为水平盒子阴影留出一些空间

【讨论】：

通常您不想编辑源代码，因为它很容易被覆盖，例如在更新期间。