Если я установил обертку в положение с плавающей точкой влево, элементы, расположенные внутри, исчезнут с 0 шириной и высотой.

Question

Я пытаюсь создать слайдер, который будет слева от контейнера, и есть другие вещи, которые я добавлю позже справа. Для своего слайдера я добавил список ul и позиционировал его элементы как абсолютные, потому что я пытаюсь создать своего рода слайдер fadeIn / fadeOut. Итак, моя проблема в том, что когда я устанавливаю контейнер ul, который является #slider, элементы внутри него исчезают, и он устанавливает все, включая контейнер, на 0 ширину и высоту. Я не понимаю, какой блок моего кода вызывает эту проблему.

Вот мой CSS / HTML:

.clear {
  clear: both;
  display: block;
}

.inline-block {
  display: inline-block;
  vertical-align: top;
}

.container {
  max-width: 900px;
}

#intro {
  padding: 0 15px;
  display: block;
  width: 100%;
  margin: 10px auto 30px auto;
}

#slider {
  float: left;
  max-width: 630px;
  border-radius: 15px;
}

#slider::after {
  content: '';
  clear: both;
  display: block;
}

#slider-images {
  background-color: #ccff00;
  position: relative;
  width: 100%;
  height: 100%;
}

#slider-images::after {
  content: '';
  clear: both;
  display: block;
}

#slider-images li {
  left: 0;
  top: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: auto;
}

#slider-images li img {
  width: 100%;
  display: block;
}

#slider-images li:hover::after {
  box-shadow: 0px 5px 25px -5px rgba(127, 130, 133, 0.25);
}

#slider-images li::after {
  transition: box-shadow .5s;
  z-index: -1;
  border-radius: 15px;
  content: '';
  position: absolute;
  width: 100%;
  height: 95.19230769230769%;
  left: 0;
  bottom: 0;
  box-shadow: 0px 1px 3px 1px rgba(127, 130, 133, 0.15);
}

#social {
  float: right;
}

<section id="intro" class="container border-box">
  <div id="slider">
    <ul id="slider-images">
      <li>
        <a href="#"><img src="img/slider/image-1.png"></a>
      </li>
      <li>
        <a href="#"><img src="img/slider/image-2.png"></a>
      </li>
      <li>
        <a href="#"><img src="img/slider/image-3.png"></a>
      </li>
      <li>
        <a href="#"><img src="img/slider/image-4.png"></a>
      </li>
      <li>
        <a href="#"><img src="img/slider/image-5.png"></a>
      </li>
    </ul>
  </div>
  <div id="social">
    <a href="#"></a>
    <a href="#"></a>
  </div>
</section>

и jsfiddle - https://jsfiddle.net/6fsh1ctz/