Slider

 <div class="content-width">
    <div class="slideshow">
      <!-- Slideshow Items -->
      <div class="slideshow-items">
        <div class="item">
          <div class="item-image-container">
            <img class="item-image" src="https://i.pinimg.com/564x/23/a4/86/23a4860b8b70b1eb27f2791b97aaee8e.jpg" />
          </div>
          <!-- Staggered Header Elements -->
          <div class="item-header">
            <span class="vertical-part"><b>N</b></span>
            <span class="vertical-part"><b>i</b></span>
            <span class="vertical-part"><b>k</b></span>
            <span class="vertical-part"><b>e</b></span>
          </div>
          <!-- Staggered Description Elements -->
          <div class="item-description">
            <span class="vertical-part">
              <b>Nike</b>
            </span>
            <span class="vertical-part">
              <b>ipsum</b>
            </span> 
            <span class="vertical-part">
              <b>dolor</b>
            </span>
            <span class="vertical-part">
              <b>sit</b>
            </span> 
            <span class="vertical-part">
              <b>amet,</b>
            </span>
            <span class="vertical-part">
              <b>consectetur</b>
            </span> 
            <span class="vertical-part">
              <b>adipiscing</b>
            </span>
            <span class="vertical-part">
              <b>elit.</b>
            </span> 
            <span class="vertical-part">
              <b>Pellentesque</b>
            </span>
            <span class="vertical-part">
              <b>elementum</b>
            </span> 
            <span class="vertical-part">
              <b>gravida</b>
            </span>
            <span class="vertical-part">
              <b>ex</b>
            </span> 
            <span class="vertical-part">
              <b>at</b>
            </span>
            <span class="vertical-part">
              <b>maximus.</b>
            </span> 
            <span class="vertical-part">
              <b>Nullam</b>
            </span>
            <span class="vertical-part">
              <b>quis</b>
            </span> 
            <span class="vertical-part">
              <b>leo</b>
            </span>
            <span class="vertical-part">
              <b>ipsum.</b>
            </span> 
            <span class="vertical-part">
              <b>Lorem</b>
            </span>
            <span class="vertical-part">
              <b>ipsum</b>
            </span> 
            <span class="vertical-part">
              <b>Nam</b>
            </span> 
            <span class="vertical-part">
              <b>consectetur</b>
            </span>
            <span class="vertical-part">
              <b>malesuada</b>
            </span> 
            <span class="vertical-part">
              <b>blandit.</b>
            </span>
            <span class="vertical-part">
              <b>Mauris</b>
            </span> 
            <span class="vertical-part">
              <b>vulputate</b>
            </span>
            <span class="vertical-part">
              <b>purus</b>
            </span> 
            <span class="vertical-part">
              <b>id</b>
            </span>
            <span class="vertical-part">
              <b>dolor</b>
            </span> 
            <span class="vertical-part">
              <b>euismod</b>
            </span>
            <span class="vertical-part">
              <b>varius.</b>
            </span>      
          </div>
        </div>
        <div class="item">
          <div class="item-image-container">
            <img class="item-image" src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/a1232e48702241.589f548dc6bee.jpg" />
          </div>
          <!-- Staggered Header Elements -->
          <div class="item-header">
            <span class="vertical-part"><b>S</b></span>
            <span class="vertical-part"><b>p</b></span>
            <span class="vertical-part"><b>o</b></span>
            <span class="vertical-part"><b>t</b></span>
            <span class="vertical-part"><b>i</b></span>
            <span class="vertical-part"><b>f</b></span>
            <span class="vertical-part"><b>y</b></span>
          </div>
          <!-- Staggered Description Elements -->
          <div class="item-description">
            <span class="vertical-part">
              <b>Spotify</b>
            </span>
            <span class="vertical-part">
              <b>ipsum</b>
            </span>
            <span class="vertical-part">
              <b>dolor</b>
            </span>
            <span class="vertical-part">
              <b>sit</b>
            </span>
            <span class="vertical-part">
              <b>amet,</b>
            </span>
            <span class="vertical-part">
              <b>consectetur</b>
            </span>
            <span class="vertical-part">
              <b>adipiscing</b>
            </span>
            <span class="vertical-part">
              <b>elit.</b>
            </span>
            <span class="vertical-part">
              <b>Pellentesque</b>
            </span>
            <span class="vertical-part">
              <b>elementum</b>
            </span>
            <span class="vertical-part">
              <b>gravida</b>
            </span>
            <span class="vertical-part">
              <b>ex</b>
            </span>
            <span class="vertical-part">
              <b>at</b>
            </span>
            <span class="vertical-part">
              <b>maximus.</b>
            </span>
            <span class="vertical-part">
              <b>Nullam</b>
            </span>
            <span class="vertical-part">
              <b>quis</b>
            </span>
            <span class="vertical-part">
              <b>leo</b>
            </span>
            <span class="vertical-part">
              <b>ipsum.</b>
            </span>
            <span class="vertical-part">
              <b>Lorem</b>
            </span>
            <span class="vertical-part">
              <b>ipsum</b>
            </span>
            <span class="vertical-part">
              <b>Nam</b>
            </span>
            <span class="vertical-part">
              <b>consectetur</b>
            </span>
            <span class="vertical-part">
              <b>malesuada</b>
            </span>
            <span class="vertical-part">
              <b>blandit.</b>
            </span>
            <span class="vertical-part">
              <b>Mauris</b>
            </span>
            <span class="vertical-part">
              <b>vulputate</b>
            </span>
            <span class="vertical-part">
              <b>purus</b>
            </span>
            <span class="vertical-part">
              <b>id</b>
            </span>
            <span class="vertical-part">
              <b>dolor</b>
            </span>
            <span class="vertical-part">
              <b>euismod</b>
            </span>
            <span class="vertical-part">
              <b>varius.</b>
            </span>
          </div>
        </div>
        <div class="item">
          <div class="item-image-container">
            <img class="item-image" src="https://images.unsplash.com/photo-1544984243-ec57ea16fe25?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" />
          </div>
          <!-- Staggered Header Elements -->
          <div class="item-header">
            <span class="vertical-part"><b>A</b></span>
            <span class="vertical-part"><b>i</b></span>
            <span class="vertical-part"><b>r</b></span>
            <span class="vertical-part"><b>b</b></span>
            <span class="vertical-part"><b>n</b></span>
            <span class="vertical-part"><b>b</b></span>
          </div>
          <!-- Staggered Description Elements -->
          <div class="item-description">
            <span class="vertical-part">
              <b>Airbnb</b>
            </span>
            <span class="vertical-part">
              <b>ipsum</b>
            </span>
            <span class="vertical-part">
              <b>dolor</b>
            </span>
            <span class="vertical-part">
              <b>sit</b>
            </span>
            <span class="vertical-part">
              <b>amet,</b>
            </span>
            <span class="vertical-part">
              <b>consectetur</b>
            </span>
            <span class="vertical-part">
              <b>adipiscing</b>
            </span>
            <span class="vertical-part">
              <b>elit.</b>
            </span>
            <span class="vertical-part">
              <b>Pellentesque</b>
            </span>
            <span class="vertical-part">
              <b>elementum</b>
            </span>
            <span class="vertical-part">
              <b>gravida</b>
            </span>
            <span class="vertical-part">
              <b>ex</b>
            </span>
            <span class="vertical-part">
              <b>at</b>
            </span>
            <span class="vertical-part">
              <b>maximus.</b>
            </span>
            <span class="vertical-part">
              <b>Nullam</b>
            </span>
            <span class="vertical-part">
              <b>quis</b>
            </span>
            <span class="vertical-part">
              <b>leo</b>
            </span>
            <span class="vertical-part">
              <b>ipsum.</b>
            </span>
            <span class="vertical-part">
              <b>Lorem</b>
            </span>
            <span class="vertical-part">
              <b>ipsum</b>
            </span>
            <span class="vertical-part">
              <b>Nam</b>
            </span>
            <span class="vertical-part">
              <b>consectetur</b>
            </span>
            <span class="vertical-part">
              <b>malesuada</b>
            </span>
            <span class="vertical-part">
              <b>blandit.</b>
            </span>
            <span class="vertical-part">
              <b>Mauris</b>
            </span>
            <span class="vertical-part">
              <b>vulputate</b>
            </span>
            <span class="vertical-part">
              <b>purus</b>
            </span>
            <span class="vertical-part">
              <b>id</b>
            </span>
            <span class="vertical-part">
              <b>dolor</b>
            </span>
            <span class="vertical-part">
              <b>euismod</b>
            </span>
            <span class="vertical-part">
              <b>varius.</b>
            </span>
          </div>
        </div>
      </div>
      <div class="controls">
        <ul>
          <li class="control" data-index="0"></li>
          <li class="control" data-index="1"></li>
          <li class="control" data-index="2"></li>
        </ul>
      </div>
    </div>
  </div>

  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100%;
  height: 100vh;
  overflow: hidden; 
  background: #22222A;
  font-family: 'Fira Mono', monospace;
  -webkit-font-smoothing: antialiased;
  font-size: .88rem;
  color: #bdbdd5;
}

.content-width {
  width: 86%;
  height: 100vh;
  margin: 0 auto;
}

.slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.slideshow-items {
  position: relative;
  width: 100%;
  height: 300px;
}

.item {
  position: absolute;
  width: 100%;
  height: auto;
}

.item-image-container {
  position: relative;
  width: 42%;
}

.item-image-container::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 101%;
  height: 101%;
  background: #22222A;
  opacity: 0;
  z-index: 1;
}

.item-image {
  position: relative;
  width: 100%;
  height: auto;
  opacity: 0;
  display: block;
  /* transition: property name | duration | timing-function | delay  */
  transition: opacity .3s ease-out .45s;
}

.item.active .item-image {
  opacity: 1;
}

.item.active .item-image-container::before {
  opacity: .8;
}

.item-description {
  position: absolute;
  top: 182px;
  right: 0;
  width: 50%;
  padding-right: 4%;
  line-height: 1.8;
}

/* Staggered Vertical Items ------------------------------------------------------*/
.item-header {
  position: absolute;
  top: 150px;
  left: -1.8%;
  z-index: 100;
}

.item-header .vertical-part {
  margin: 0 -4px;
  font-family: 'Montserrat', sans-serif;
  -webkit-font-smoothing: auto;
  font-size: 7vw;
  color: #fff;
}

.vertical-part {
  overflow: hidden;
  display: inline-block;
}

.vertical-part b {
  display: inline-block;
  transform: translateY(100%);
}

.item-header .vertical-part b {
  transition: .5s;
}

.item-description .vertical-part b {
  transition: .21s;
}

.item.active .item-header .vertical-part b {
  transform: translateY(0);
}

.item.active .item-description .vertical-part b {
  transform: translateY(0);
}

/* Controls ----------------------------------------------------------------------*/
.controls {
  position: relative;
  text-align: right;
  z-index: 1000;
}

.controls ul {
  list-style: none;
}

.controls ul li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 3px;
  background:#bdbdd5;;
  cursor: pointer;
}

.controls ul li.active {
  background:#6a6a77;;
}