Question

我试图创建一个动画滑块，以便＆＃34;非活动＆＃34;两侧仍然显示幻灯片。孩子的身高尚不清楚。此外，在调整页面大小时，高度可能会增加。目前我有这个：https://codepen.io/anon/pen/odoYPx

HTML：

<div class="row side-by-side-slider">
  <div class="col-md-6 ss-slide-left ss-slide">
    <div class="ss-slide-content">
      Content
    </div>
  </div>

  <div class="col-md-6 ss-slide active">
    <div class="ss-slide-content">
      Content
    </div>
  </div>

  <div class="col-md-6 col-md-push-10 ss-slide">
    <div class="ss-slide-content">
      Content
    </div>
  </div>
</div>

CSS：

body {
  overflow: hidden;
}
.side-by-side-slider {
    overflow: hidden;
}

.side-by-side-slider .ss-slide {
    position: absolute;
    opacity: .26;
    margin: 0 15px;
    background: #f5f4f4;
    -webkit-box-shadow: 0 0 40px 0 #F5F4F4;
    box-shadow: 0 0 40px 0 #F5F4F4;
    border-radius: 10px;
    padding: 45px 70px;
    width: 50%;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

.side-by-side-slider .ss-slide-left {
    left: -33.3333333%;
}

.side-by-side-slider .ss-slide.active {
    left: 25%;
    opacity: 1;
}

.col-md-push-10 {
    left: 83.33333333%;
}

问题是父母（.side-by-side-slider）并没有围绕孩子。如果没有孩子，我无法弄清楚如何做到这一点：绝对＆＃34;从那时起我就有了对齐问题。我省略了滑块JS代码，因为对于这个问题，它没有必要。它仍在进行中。任何帮助表示赞赏！

Answer 1

https://codepen.io/7ssan91/pen/RyjVNW如果您想控制应使用媒体查询的高度https://www.w3schools.com/css/css_rwd_images.asp

，您可以将此滑块仅用于Html和Css

Answer 2

我只是想知道是否有纯CSS解决方案，但无法制作一个。我最终使用jQuery来实现这一目标。更具体地说，这个功能：

makeChildHeight() {
  let maxHeight = $('.side-by-side-slider .ss-slide').innerHeight() + 80;
  Array.prototype.forEach.call($('.side-by-side-slider .ss-slide'), function(slide) {
    if ($(slide).innerHeight() + 80 > maxHeight) {
      maxHeight = $(slide).innerHeight() + 80;
    }
  });
  $('.side-by-side-slider').css(
      {'height': maxHeight}
  );
}

CSS并排滑块

2 个答案: