<div class="wrapper">
<div class="block"></div>
</div>
<div class="prev">BACK</div>
<div class="next">NEXT</div>
.wrapper{
display:flex;
justify-content: center;
}
.block{
width: 200px;
height: 300px;
background: green;
}
.prev, .next{
border: 1px solid;
width: 50px;
padding: 20px;
}
let offset = 0;
$('.prev').click(function() {
if(offset == 100) return;
offset -= 20;
$('.block').animate({'margin-left': offset + '%'}, 'slow');
});
$('.next').click(function() {
if(offset == 100) return;
offset += 20;
$('.block').animate({'margin-left': offset + '%'}, 'slow');
});
This Pen doesn't use any external CSS resources.