<section class="four-slide">
  <div class="solutions">
    <div class="accordion">
      <div class="slide">
        <div class="holder-frame holder-frame1">
          <div class="inner-holder create-holder">
            <div class="create create-1"></div>
            <div class="create create-2"></div>
            <div class="create create-3"></div>
          </div>
        </div>
        <div class="entry-text">
          <h3 class="slide-heading">Recreate<br> old<br> capital</h3>
          <p class="slide-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit earum autem culpa
            id
            aperiam quod veritatis, qui aliquid vero velit ad modi quisquam deleniti quaerat minus consequatur
            laborum
            voluptate accusamus.</p>
          <p class="mobile-link">view solution</p>
        </div>
      </div>
      <div class="slide">
        <div class="holder-frame holder-frame2">
          <div class="inner-holder transform-holder">
            <div class="transform transform-1"></div>
            <div class="transform transform-2"></div>
            <div class="transform transform-3"></div>
            <div class="transform transform-4"></div>
          </div>
        </div>
        <div class="entry-text">
          <h3 class="slide-heading">Retransform<br> ours<br> institution</h3>
          <p class="slide-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit earum autem culpa
            id
            aperiam quod veritatis, qui aliquid vero velit ad modi quisquam deleniti quaerat minus consequatur
            laborum
            voluptate accusamus.</p>
          <p class="mobile-link">view solution</p>
        </div>
      </div>
      <div class="slide current">
        <div class="holder-frame holder-frame3">
          <div class="inner-holder bring-holder">
            <div class="bring bring-1"></div>
            <div class="bring bring-2"></div>
            <div class="bring bring-3"></div>
            <div class="bring bring-4"></div>
            <div class="bring bring-5"></div>
          </div>
        </div>
        <div class="entry-text">
          <h3 class="slide-heading">Rebring<br> from<br> purchase</h3>
          <p class="slide-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit earum autem culpa
            id
            aperiam quod veritatis, qui aliquid vero velit ad modi quisquam deleniti quaerat minus consequatur
            laborum
            voluptate accusamus.</p>
          <p class="mobile-link">view solution</p>
        </div>
      </div>
      <div class="slide">
        <div class="holder-frame holder-frame4">
          <div class="inner-holder launch-holder">
            <div class="launch launch-1"></div>
            <div class="launch launch-2"></div>
            <div class="launch launch-3"></div>
            <div class="launch launch-4"></div>
            <div class="launch launch-5"></div>
          </div>
        </div>
        <div class="entry-text">
          <h3 class="slide-heading">Relaunch<br> without<br> opponents</h3>
          <p class="slide-text">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Impedit earum autem culpa
            id
            aperiam quod veritatis, qui aliquid vero velit ad modi quisquam deleniti quaerat minus consequatur
            laborum
            voluptate accusamus.</p>
          <p class="mobile-link">view solution</p>
        </div>
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</section>
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; }

*, *:before, *:after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit; }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #000;
  background: #f4f4f4;
  font: 16px/1.2 Arial, 'Helvetica Neue', Helvetica, sans-serif;
  min-width: 320px; }

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6,
.h {
  font-family: inherit;
  font-weight: bold;
  margin: 0 0 0.5em;
  color: inherit; }

h1, .h1 {
  font-size: 30px; }

h2, .h2 {
  font-size: 27px; }

h3, .h3 {
  font-size: 16px; }

h4, .h4 {
  font-size: 21px; }

h5, .h5 {
  font-size: 17px; }

h6, .h6 {
  font-size: 15px; }

p {
  margin: 0 0 1em; }


.four-slide {
  overflow: hidden;
  background-color: #eee;
  width: 100%;
  padding: 15px;

  .slide-heading {
    text-transform: uppercase;
  }

  .accordion {
    display: flex;
    max-width: 1030px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    overflow: hidden;



    .slide-text {
      transition: opacity .3s;
      width: 90%;
      opacity: 0;
    }
  }

  .slide {
    width: 40%;
    flex-shrink: 0;
    transition: transform .3s;
    position: relative;
    overflow: hidden;

    &.current:not(.active) {
      .entry-text {
        transition: opacity .3s;
        padding: 0 15px 0 0;
      }
    }

    .entry-text {
      padding: 0 15px 0 0;
      transition: transform .3s,
        padding .3s;
      transform: translateX(50%);
    }

    &.current {
      .entry-text {

        transform: translateX(0);
        padding: 0 15px;

        .slide-text {
          transition: opacity .3s;
          opacity: 1;
        }
      }

    }

    .mobile-link {
      display: none;
    }

    &:first-child {
      z-index: 3;
      transform: translateX(-50%);

      .inner-holder {
        transform: translateX(50%);
      }
    }

    &:nth-child(2) {
      z-index: 2;
      transform: translateX(-100%);

      .inner-holder {
        transform: translateX(50%);
      }
    }

    &:nth-child(3) {
      z-index: 1;
      transform: translateX(-100%);
    }

    &:last-child {
      z-index: 0;
      transform: translateX(-150%);

      .holder-frame {
        border-right: 0;
      }
    }

    &.current {
      .inner-holder {
        transform: translateX(0);
      }

      +.slide {
        .inner-holder {
          transform: translateX(0) !important;
        }
      }
    }
  }

  .holder-frame {
    border-right: 15px solid #eee;
    padding-bottom: calc((1200/860)*100%);
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #eee;
  }

  .inner-holder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: 50% 50%;
    background-size: cover;
    transition: transform .3s;
  }
}

.bring-holder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  max-height: 1200px;

  .slide.active &,
  .swiper-slide.current & {

    .bring {
      transition: transform 2s ease-in-out,
        opacity 1s 1s ease-in-out;
    }

    .bring-1 {
      transform: translateX(0);

    }

    .bring-2 {
      transform: translateX(9.42%);

    }

    .bring-3 {
      transform: translateX(18.83%);

    }

    .bring-4 {
      transform: translateX(28.25%);

    }

    .bring-5 {
      transform: translateX(37.67%);
    }
  }

  .bring {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url('https://i.ibb.co/WyFTxQY/accordion-rebring.jpg') center center no-repeat;
    background-size: 100% 100%;
    transform: translateY(0);
  }

  .bring-1 {
    z-index: 5;
  }

  .bring-2 {
    z-index: 6;
  }

  .bring-3 {
    z-index: 7;
  }

  .bring-4 {
    z-index: 8;
  }

  .bring-5 {
    z-index: 9;
  }
}

@mixin position($img-width, $img-height, $part-width, $part-height, $part-number) {
  $width: calc(#{$part-width}/#{$img-width}*100);
  $height: calc(#{$part-height}/#{$img-height}*100);
  $bg-size-x: calc(100% * (100 / #{$width}));
  $bg-size-y: calc(100% * (100 / #{$height}));
  $top: calc(#{$part-number} * 100%/#{$img-height}*100);
  $left: calc(#{$part-number} * 100%/#{$img-width}*100);
  width: calc(1% * #{$width});
  height: calc(1% * #{$height});
  top: $top;
  left: $left;
  background-size: calc(#{$bg-size-x}) calc(#{$bg-size-y});

  .slide.active &,
  .swiper-slide.current & {
    background-size: $bg-size-x $bg-size-y;
  }
}

.create-holder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .slide.active &,
  .swiper-slide.current & {

    .create-1 {
      transition: transform 2s ease-in-out,
        opacity 1s 1s ease-in-out;
      transform: scale(2);

    }

    .create-2 {
      transition: background-position 2s ease-in-out,
        opacity 1s 1s ease-in-out;
      background-position: 0 15%;
    }

    .create-3 {
      background-position: 100% 15%;
      transition: background-position 2.5s ease-in-out;
    }

  }

  .create {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url('https://i.ibb.co/h8kjgz4/accordion-recreate.jpg') no-repeat;
  }

  .create-1 {
    @include position(860, 1200, 1200, 1200, 0);
  }

  .create-2 {
    overflow: hidden;
    @include position(860, 1200, 660, 1000, 1);
    background-position: 50% 50%;
  }

  .create-3 {
    @include position(860, 1200, 460, 800, 2);
    background-position: 50% 50%;
  }
}

.launch-holder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  max-height: 1200px;

  .slide.active &,
  .swiper-slide.current & {

    .launch {
      transition: transform 2s ease-in-out,
        opacity 1s 1s ease-in-out;
    }

    .launch-1 {
      transform: translate3d(0, -37.67%, 0);
      opacity: 1;
    }

    .launch-2 {
      transform: translate3d(0, -28.25%, 0);

    }

    .launch-3 {
      transform: translate3d(0, -18.83%, 0);

    }

    .launch-4 {
      transform: translate3d(0, -9.42%, 0);

    }

    .launch-5 {
      transform: translate3d(0, 0, 0);

    }

  }

  .launch {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 100%;
    background: url('https://i.ibb.co/p4TX261/accordion-relaunch.jpg') center center no-repeat;
    background-size: 100% 100%;
    transform: translate3d(0, 0, 0);
  }

  .launch-1 {
    z-index: 9;
  }

  .launch-2 {
    z-index: 8;
  }

  .launch-3 {
    z-index: 7;
  }

  .launch-4 {
    z-index: 6;
  }

  .launch-5 {
    z-index: 5;
  }
}

.transform-holder {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;

  &:before {
    transition: opacity 2s ease-in-out;
    position: absolute;
    top: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    background: url('https://i.ibb.co/V2bh7gz/accordion-retransform.jpg');
    background-size: 100% 100%;
    content: "";
  }

  .slide.active &,
  .swiper-slide.current & {

    &:before {
      opacity: 0.9;
    }

    .transform-1 {
      transition: transform 2s ease-in-out;
      transform: translateY(-50%);
    }

    .transform-2 {
      transition: transform 3.5s ease-in-out;
      transform: translateY(35%);
    }

    .transform-3 {
      transition: transform 3s ease-in-out;
      transform: translateY(-22.5%);
    }

    .transform-4 {
      $animation: cubic-bezier(.42, 0, .58, 2);
      transition: transform 4s $animation;
      transform: translateY(30%);
    }

  }

  .transform {
    position: relative;
    z-index: 3;
    box-sizing: border-box;
    width: 25%;
    height: 100%;
    background: url('https://i.ibb.co/V2bh7gz/accordion-retransform.jpg') center center no-repeat;
    background-size: 400% 100%;
  }

  .transform-1 {
    $part: 0%;
    $x-pos: calc(#{$part}*(100/3));
    position: absolute;
    left: 0;
    background-position: $x-pos 0;
  }

  .transform-2 {
    $part: 1%;
    $x-pos: calc(#{$part}*(100/3));
    position: absolute;
    left: 25%;
    background-position: $x-pos 0;
  }

  .transform-3 {
    $part: 2%;
    $x-pos: calc(#{$part}*(100/3));
    position: absolute;
    left: 50%;
    background-position: $x-pos 0;
  }

  .transform-4 {
    $part: 3%;
    $x-pos: calc(#{$part}*(100/3));
    position: absolute;
    left: 75%;
    background-position: $x-pos 0;
  }
}
View Compiled
const $section = $('.four-slide');
const SLIDE = 'slide';
const $holder = $section.find(`.${SLIDE}`);
const ACTIVE_CLASS = 'active';
const CURRENT_CLASS = 'current';
const INNER_HOLDER_CLASS = 'inner-holder';
 const BREAKPOINT = 0;

var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (timers[uniqueId]) {
      clearTimeout(timers[uniqueId]);
    }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

function accordionSlider() {

  let isMobileHeader;

  $(window).on('resize load', function () {
    waitForFinalEvent(function () {
      isMobileHeader = $(window).width() < BREAKPOINT;
      horizontalSlider();
    }, 500);
  });

  function horizontalSlider() {

    if (isMobileHeader) {
      _destroy();
      return false;
    };

    const positionsPool = [
      [0, 50, 100, 150],
      [50, 50, 100, 150],
      [50, 100, 100, 150],
      [50, 100, 150, 150]
    ];
    const slidesQuantity = positionsPool.length;
    let slideActiveindex = $holder.index($(`.${CURRENT_CLASS}`));
    let StartPositions = positionsPool[slideActiveindex];
    let $preLastInnerHolder = $($holder[slidesQuantity - 2]).find(`.${INNER_HOLDER_CLASS}`);
    $holder.each(function (i, element) {
      let translateValue = StartPositions[i];
      $(element).css({
        'transform': `translateX(-${translateValue}%)`
      })
      $(element).on('mouseenter', function () {
        let prevActiveIndex = $holder.index($(`.${CURRENT_CLASS}`));
        let currentItemStartPosition = StartPositions[i];
        let prevItemStartPosition = StartPositions[prevActiveIndex];
        let ActiveElementIndex = i;
        $($holder[prevActiveIndex]).removeClass(CURRENT_CLASS).removeClass(ACTIVE_CLASS);
        $(this).addClass(CURRENT_CLASS).addClass(ACTIVE_CLASS);
        $holder.each(function (i, element) {
          let currentPosition = positionsPool[ActiveElementIndex][i];
          $(element).css({
            'transform': `translateX(-${currentPosition}%)`
          })
        });
        $preLastInnerHolder.css({
          'transform': 'translateX(0)'
        });
        if (i == slidesQuantity - 1) {
          $preLastInnerHolder.css({
            'transform': 'translateX(50%)'
          })
        }
      })
      $(element).on('mouseleave', function () {
        $(this).removeClass(ACTIVE_CLASS);
      })
    })

    function _destroy() {
      $holder.each(function (i, element) {
        $(element).css({
          'transform': `translateX(0)`
        })
        $(element).unbind('mouseenter');
      })
    }
  }
}

accordionSlider();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js