小编JJa*_*aun的帖子

我遇到了Slick carousel JS插件的问题,其中有多个slideToShow,它们具有不同的高度.

我需要幻灯片具有相同的高度,但是使用CSS flex-box它不起作用,因为幻灯片具有冲突的CSS定义.

也没有在论坛和网络上找到任何有用的东西.

如果我得到了一些工作,我会在这里发布解决方案.当然,欢迎提出任何建议.

HTML

<div class="slider">
  <div class="slide">
    <p>Lorem ipsum.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua</p>
  </div>
  <div class="slide">
    <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
  </div>
  <div class="slide">
    <p>Lorem ipsum dolor …

问题是光滑的滑块div有溢出:隐藏; 因此幻灯片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 …