JSFiddle - React, Tailwind, and code Playground

by Andrei Gheorghiu

HTML

<div class="m-tract-slider">
  <div class="s-Track">
    <div style="background-image:url('https://static.pexels.com/photos/126282/pexels-photo-126282.jpeg')">
      <div class="s-Content">
        <span class="s-Title">Gde ćeš provesti večnost?</span>
        <span class="s-Text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
        </span>
      </div>
    </div>

    <div style="background-image:url('https://static.pexels.com/photos/29017/pexels-photo-29017.jpg')">
      <div class="s-Content">
        <span class="s-Title">Title 2</span>
        <span class="s-Text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
         </span>
      </div>
    </div>

    <div style="background-image:url('https://static.pexels.com/photos/70760/dandelion-dandelion-seeds-taraxacum-fluffy-70760.jpeg')">
      <div class="s-Content">
        <span class="s-Title">Title 3</span>
        <span class="s-Text">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          Voluptatum ea assumenda, nam quia, distinctio omnis. Aspernatur,
          molestias nostrum dolores? Voluptas sequi labore cum ipsum
          necessitatibus possimus, soluta veritatis aut dicta.
        </span>
      </div>
    </div>
  </div>
  <div class="s-Control">
    <div class="s-Btn slide-left">Prev</div>
    <div class="s-Btn slide-right">Next</div>
  </div>
</div>

SCSS

.m-tract-slider {
  width: 100%;
  height: 75vh;
  margin: 12.5vh auto;
  position: relative;
  overflow: hidden;
  background-color: #f5f5f5
}
body {
  background-color: white;
  margin: 0;
}

.s-Track {
  height: 100%;
  > div {
    height: 100%;
    position: absolute;
    background: transparent no-repeat 50% 50%/cover;
    width: 100%
  }
  > .before {
    margin-left: -100%
  }
  > .current {
    .s-Content {
      transform: translate(0, 0);
    }
    + div {
      margin-left: 100%
    }
  }
  > .after ~ div {
    opacity: 0
  }
  .s-Content {
    position: absolute;
    bottom: 1rem;
    top: 1rem;
    right: 1rem;
    width: 40%;
    background: rgba(255, 255, 255, .95);
    padding: 3em;
    margin: 0;
    transform: translate(calc(100% + 1rem), 0);
    transition: transform .4s cubic-bezier(.4, .0, .2, 1);
    overflow-y: auto;
  }
  .s-Title {
    font-size: 32px;
    font-weight: 700;
    color: #212121
  }
  .s-Text {
    font-size: 18px;
    display: block;
    margin-top: 2rem;
    color: #999;
    font-weight: 300
  }
}

.s-Control {
  position: absolute;
  bottom: 0;
  left: 1rem;
  background: #fff;
  padding: 1rem;
  .s-Btn {
    display: inline-block;
    cursor: pointer;
    margin-left: 1rem;
    &:first-child {
      margin-left: 0
    }
  }
}
.go-right > div {
  transform: translateX(-100%);
}

.go-left > div {
  transform: translateX(100%);
}

.go-left > div,
.go-right > div {
  transition: transform 450ms cubic-bezier(.4, 0, .2, 1)
}

JavaScript

var theSlider = {
  track: document.querySelector('.s-Track'),
  // has to match `transition-duration` in CSS:
  duration: 450,
  reset: function() {
    var slides = document.querySelectorAll('.s-Track > div');
    for (var i = 0; i < slides.length; i++) {
      slides[i].className = '';
      slides[i].classList.add(i > 1 ? 'after' : (i ? 'current' : 'before'))
    }
  },
  init: function() {
    theSlider.reset();
  },
  next: function() {
    theSlider.track.classList.add('go-right');
    setTimeout(function() {
      var firstSlide = document.querySelector('.s-Track > div:first-child');
      theSlider.track.appendChild(firstSlide);
      theSlider.reset();
      theSlider.track.classList.remove('go-right')
    }, theSlider.duration)
  },
  prev: function() {
    theSlider.track.classList.add('go-left');
    setTimeout(function() {
      var lastSlide = document.querySelector('.s-Track > div:last-child');
      theSlider.track.insertBefore(lastSlide, theSlider.track.firstChild);
      theSlider.reset();
      theSlider.track.classList.remove('go-left')
    }, theSlider.duration)
  },
  prevButton: document.querySelector('.slide-left'),
  nextButton: document.querySelector('.slide-right')
};

window.addEventListener("load", theSlider.init);
theSlider.prevButton.addEventListener('click', theSlider.prev);
theSlider.nextButton.addEventListener('click', theSlider.next);