Overflow hidden translated slides

index.html

<div class="slides">
  <div class="slide slide--active" data-slide="1">
    <h1>Slide 1</h1>
    <span class="btn" data-slide-btn="2">Button 1</span>
    <span class="btn" data-slide-btn="3">Button 2</span>
    <span class="btn" data-slide-btn="4">Button 3</span>
  </div>
  <div class="slide" data-slide="2">
    <h1>Slide 2</h1>
    <span class="btn js-slide-return-btn">return</span>
  </div>
  <div class="slide" data-slide="3">
    <h1>Slide 3</h1>
    <span class="btn js-slide-return-btn">return</span>
  </div>
  <div class="slide" data-slide="4">
    <h1>Slide 4</h1>
    <span class="btn js-slide-return-btn">return</span>
  </div>
</div>

overflow-hidden-translated-slides.markdown

Overflow hidden translated slides

A Pen by Milorad on CodePen.

License.

script.js

$('[data-slide-btn]').on('click', function() {
  let btnValue = $(this).attr('data-slide-btn');
  let slideToScroll = $('[data-slide]');
  for (let i = 0; i < slideToScroll.length; i++) {
    let scrollNum = $(slideToScroll[i]).attr('data-slide');
    if (btnValue == scrollNum) {
      $('.slide--active').removeClass('slide--active');
      $(slideToScroll[i]).addClass('slide--active');
    }
  }
});
$('.js-slide-return-btn').on('click', function(){
  $('.slide--active').removeClass('slide--active');
  $('[data-slide="1"]').addClass('slide--active');
})

scripts

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

style.scss

h1 {
  font-size: 44px;
  font-weight: bold;
  margin-bottom: 15px;
}
.slides {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  transition: .5s ease-in-out;
  z-index: -1;
}
.slide--active {
  transform: translateX(0);
  z-index: 1;
}
.btn {
  display: inline-block;
  background-color: firebrick;
  color: white;
  padding: 10px 35px;
  &:hover {
    cursor: pointer;
    background-color: #f12e2e;
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />