CSS side-by-side slider

Question

I'm trying to create an animated slider so that the "non-active" slides are still shown on the sides. The height of the children is not known. Also, when resizing the page, the height might increase. Currently I have this: 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%;
}

The problem is that the parent (.side-by-side-slider) doesn't wrap around the children. I couldn't figure out how to do it without children being "position: absolute" since then I had alignment issues. I left out the slider JS code because for this problem it's not necessary. It's still a work in progress. Any help is appreciated!

If the size of the children is known, then you can directly give it as the height for the parent also. — Abin Thaha, May 07 '18 at 09:42
The height of the children is not known. Also, when resizing the page, the height might increase. The children contain text. — Kert, May 07 '18 at 09:56
Possible duplicate of [Make absolute positioned div expand parent div height](https://stackoverflow.com/questions/12070759/make-absolute-positioned-div-expand-parent-div-height) — Gezzasa, May 07 '18 at 09:57

score 0 · Answer 1 · answered May 07 '18 at 11:15

0

https://codepen.io/7ssan91/pen/RyjVNW you can use this slider with only Html and Css if you want to control of the height you should use media query https://www.w3schools.com/css/css_rwd_images.asp

answered May 07 '18 at 11:15

Ahmed Hassan

19
4

1

Hasan. Post your code directly into SO. SO now support rendering `HTML`, `CSS` and `JS` snippet in your answer. Check the top bar of your answer page . – Ratul Sharker May 07 '18 at 11:23

score 0 · Accepted Answer · answered May 07 '18 at 17:05

I was just wondering if there was a pure CSS solution, but couldn't make one. I ended up using jQuery to achieve this. More specifically this function:

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 side-by-side slider

2 Answers2