<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');
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js