The original slider

<div class="container">
  <div class="section sec-1">
    <div class="word">
      <div class="letter">f</div>
      <div class="letter">i</div>
      <div class="letter">r</div>
      <div class="letter">s</div>
      <div class="letter">t</div>
    </div>
    <span class="close-btn">+</span>
    <div class="inner"></div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros.
    </div>
  </div>
  <div class="section sec-2">
    <div class="word">
      <div class="letter">s</div>
      <div class="letter">e</div>
      <div class="letter">c</div>
      <div class="letter">o</div>
      <div class="letter">n</div>
      <div class="letter">d</div>
    </div>
    <span class="close-btn">+</span>
    <div class="inner"></div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros.
    </div>
  </div>
  <div class="section sec-3">
    <div class="word">
      <div class="letter">t</div>
      <div class="letter">h</div>
      <div class="letter">i</div>
      <div class="letter">r</div>
      <div class="letter">d</div>
    </div>
    <span class="close-btn">+</span>
    <div class="inner"></div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros.
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque.
    </div>
  </div>
  <div class="section sec-4">
    <div class="word">
      <div class="letter">f</div>
      <div class="letter">o</div>
      <div class="letter">u</div>
      <div class="letter">r</div>
      <div class="letter">t</div>
      <div class="letter">h</div>
    </div>
    <span class="close-btn">+</span>
    <div class="inner"></div>
    <div class="text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque varius orci sed justo venenatis pellentesque. Duis eget lacus quis tortor interdum fringilla. Pellentesque non risus vel odio adipiscing posuere at ut neque. Sed vel justo vitae risus commodo tincidunt. Sed ornare felis eros.
    </div>
  </div>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
//Скрипт js надо подключать здесь
//Автор: Nikolay Talanov. @suez

@font-face {
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/PFSquareSansPro-Medium.otf");
  font-family: pfs-medium;
}
@font-face {
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/decade.ttf");
  font-family: decade;
}
*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow: hidden;
}

body {
  position: relative;
  z-index: 10;
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-bg.jpg");
  background-size: cover;
  font-family: pfs-medium;
}
body:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: -10;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40rem;
  height: 150%;
  font-size: 0;
  z-index: 15;
  transform: translate3d(-50%, -50%, 0) rotate(-10deg);
  transition: transform 1s, width 1s, height 1s;
  will-change: transform, width, height;
}
.container.ready .section {
  transform: translate3d(0, 0, 0);
}
.container.phase-2 .section {
  transition-delay: 0s;
}
.container.phase-2 .section:after {
  background-color: rgba(0, 0, 0, 0.4);
}
.container.phase-2 .section:hover:after {
  background-color: transparent;
}
.container.phase-2 .section.sec-1:hover .letter {
  color: #ec5362;
}
.container.phase-2 .section.sec-2:hover .letter {
  color: #1B5469;
}
.container.phase-2 .section.sec-3:hover .letter {
  color: #759e3b;
}
.container.phase-2 .section.sec-4:hover .letter {
  color: #7C3486;
}
.container.phase-2 .word {
  opacity: 1;
}
.container.active {
  width: 100%;
  height: 100%;
  transform: translate3d(-50%, -50%, 0);
}
.container.active .section.active {
  width: calc(100% - 30rem);
  cursor: auto;
}
.container.active .section.active .word {
  opacity: 0;
}
.container.active .section.active .inner {
  z-index: -5;
}
.container.active .section.active:after {
  z-index: -3;
}
.container.active .section.active:hover:after {
  background-color: rgba(0, 0, 0, 0.4);
}
.container.active .section.active .close-btn {
  opacity: 1;
  z-index: 100;
}
.container.active .section.active .text {
  opacity: 1;
  z-index: 50;
  transition-delay: 1s;
}
.container.active .section:not(.active) .word .letter {
  transform: translate3d(0, 0, 0) rotate(0deg);
}

.section {
  position: relative;
  display: inline-block;
  width: 10rem;
  height: 100%;
  background: #fff;
  overflow: hidden;
  z-index: 20;
  transition: transform 1s, width 1s;
  cursor: pointer;
}
.section:nth-child(even) {
  transform: translate3d(0, 100%, 0);
}
.section:nth-child(odd) {
  transform: translate3d(0, -100%, 0);
}
.section.sec-1 .inner {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-1.jpg");
}
.section.sec-2 {
  transition-delay: 0.5s;
}
.section.sec-2 .inner {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-2.jpg");
}
.section.sec-3 {
  transition-delay: 1s;
}
.section.sec-3 .inner {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-3.jpg");
}
.section.sec-4 {
  transition-delay: 1.5s;
}
.section.sec-4 .inner {
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/142996/sections-4.jpg");
}
.section:after {
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transition: background-color 0.5s;
  will-change: background-color;
}
.section .close-btn {
  position: absolute;
  top: -0.5rem;
  right: 1.1rem;
  opacity: 0;
  z-index: -100;
  transition: z-index 0.5s, opacity 0.5s, color 0.5s, transform 0.5s;
  will-change: opacity, color;
  transform: rotate(45deg);
  color: #fff;
  font-size: 5rem;
  cursor: pointer;
}
.section .close-btn:hover {
  color: red;
  transform: rotate(225deg);
}
.section .text {
  height: 100%;
  color: #fff;
  padding: 3rem;
  opacity: 0;
  font-size: 3rem;
  transition: opacity 0.5s, z-index 0.5s;
  will-change: opacity;
  z-index: -150;
  overflow-y: auto;
}

.inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
}

.word {
  position: absolute;
  z-index: 50;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translateX(-50%) translateY(-50%);
  transition: opacity 0.5s;
  will-change: opacity;
}
.word .letter {
  color: #fff;
  font-size: 4rem;
  text-transform: uppercase;
  transform: rotate(10deg);
  transition: color 0.5s, transform 0.5s;
  will-change: transform, color;
  font-family: decade;
}

$(document).ready(function () {
  var $cont = $(".container");

  $cont.addClass("ready");

  setTimeout(function () {
    $cont.addClass("phase-2");

    $(document).on("click", ".section:not(.active)", function () {
      $(".section.active").removeClass("active");
      $cont.addClass("active");
      $(this).addClass("active");
    });

    $(document).on("click", ".close-btn", function () {
      $cont.removeClass("active");
      $(".section").removeClass("active");
    });
  }, 2500);
});