<div class="slider">
  <div class="slider__inner">
    <div class="sider__caption">
      Lorem ipsum dolor, sit amet consectetur adipisicing elit. Officia, dolorem quisquam. Possimus recusandae voluptatem repudiandae, sapiente tenetur porro, maiores suscipit iure pariatur optio inventore excepturi impedit magnam animi provident dolorum.
    </div>
    <!-- Slider main container -->
    <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <div class="slide" style="background: url(https://images.unsplash.com/photo-1495360010541-f48722b34f7d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=376&q=80) center top / cover">
            <div class="slide__text">Slide 1</div>
            <div class="slide__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, neque.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide" style="background: url(https://images.unsplash.com/photo-1573865526739-10659fec78a5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=358&q=80) center top / cover">
            <div class="slide__text">Slide 2</div>
            <div class="slide__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, neque.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide" style="background: url(https://images.unsplash.com/photo-1574388043891-87082df8d6e5?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=375&q=80) center top / cover">
            <div class="slide__text">Slide 3</div>
            <div class="slide__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, neque.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide" style="background: url(https://images.unsplash.com/photo-1455970022149-a8f26b6902dd?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=348&q=80) center top / cover">
            <div class="slide__text">Slide 4</div>
            <div class="slide__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, neque.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide">
            <div class="slide__text">Slide 5</div>
            <div class="slide__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, neque.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide">
            <div class="slide__text">Slide 6</div>
            <div class="slide__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, neque.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide">
            <div class="slide__text">Slide 7</div>
            <div class="slide__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, neque.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide">
            <div class="slide__text">Slide 8</div>
            <div class="slide__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, neque.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide">
            <div class="slide__text">Slide 9</div>
            <div class="slide__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, neque.</div>
          </div>
        </div>
        <div class="swiper-slide">
          <div class="slide">
            <div class="slide__text">Slide 10</div>
            <div class="slide__desc">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, neque.</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
</div>

html,
body {
  position: relative;
  height: 100%;
}

body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}

.slider {
  width: 75%;
  margin: 0 auto;
  margin-top: 20px;
  padding: 0 40px;
  position: relative;
}

.slider__inner {
  position: relative;
  overflow: hidden;
}

.sider__caption {
  margin-left: calc((100% - 60px) / 3 + 30px);
  margin-bottom: 20px;
}

.swiper-container {
  height: 250px;
  width: calc((100% - 60px) / 3);
  margin-left: 0;
  overflow: visible;
}

.swiper-wrapper {

}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;

  display: flex;
}

.slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  transition: 0.3s;
  user-select: none;
}

.slide__text {
  margin-top: 20px;
}

.slide__desc {
  position: absolute;
  font-size: 0.75em;
  right: 0;
  bottom: 0;
  left: 20px;
  padding: 5px;
  background-color: #fff9;
  transform: translateY(100%);
  transition: 0.3s 0.3s;
  text-align: left;
}

function updateActiveSlide(swiper) {
  const activeSlide = swiper.slides[swiper.activeIndex].querySelector('.slide');
  const activeDesc = swiper.slides[swiper.activeIndex].querySelector('.slide__desc');

  const dy = swiper.el.offsetTop;
  activeSlide.style.height = `calc(100% + ${dy}px)`;
  activeSlide.style.transform = `translateY(${-dy}px)`;
  activeDesc.style.transform = `translateY(-10px)`;
  
  if (swiper.previousIndex !== undefined) {
    const previousSlide = swiper.slides[swiper.previousIndex].querySelector('.slide');
    const previousDesc = swiper.slides[swiper.previousIndex].querySelector('.slide__desc');
    previousSlide.style.height = `100%`;
    previousSlide.style.transform = `translateY(0)`;
    previousDesc.style.transform = `translateY(100%)`;
  }
}

const swiper = new Swiper('.swiper-container', {
  slidesPerView: 1,
  spaceBetween: 30,
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev"
  },
  on: {
    resize: updateActiveSlide,
    afterInit: updateActiveSlide,
    slideChange: updateActiveSlide,
  }
});