title: CSS side-by-side slider
body: <p>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: <a href="https://codepen.io/anon/pen/odoYPx" rel="nofollow noreferrer">https://codepen.io/anon/pen/odoYPx</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="row side-by-side-slider"&gt;
    &lt;div class="col-md-6 ss-slide-left ss-slide"&gt;
      &lt;div class="ss-slide-content"&gt;
        Content
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-6 ss-slide active"&gt;
      &lt;div class="ss-slide-content"&gt;
        Content
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="col-md-6 col-md-push-10 ss-slide"&gt;
      &lt;div class="ss-slide-content"&gt;
        Content
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>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%;
  }
  </code></pre>
  
  <p>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!</p>