Skip to content

Instantly share code, notes, and snippets.

@moonbyt3
Created August 9, 2019 08:39
Show Gist options
  • Save moonbyt3/2ba5dbb859449133f138d967c9b855ae to your computer and use it in GitHub Desktop.
Save moonbyt3/2ba5dbb859449133f138d967c9b855ae to your computer and use it in GitHub Desktop.
Overflow hidden translated slides
<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>
$('[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');
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
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;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment