JSFiddle - React, Tailwind, and code Playground

by Hüseyin BABAL

HTML

<a href="#" data-id="-200" class="paginate">Move to first div</a>
<a href="#" data-id="0" class="paginate">Move to center</a>
<a href="#" data-id="200" class="paginate">Move to 3rd div</a>

<div id="main-wrapper">
    <div id="div1" class="divstyle" style="left:0;">this is first</div>
    <div id="div2" class="divstyle" style="left:200;">this is second</div>
    <div id="div3" class="divstyle" style="left:400;">this is third</div>

</div>

CSS

.divstyle{
    float:left;
    border: 1px solid red;
}
#main-wrapper{
    position:absolute;
    border: 2px solid green;
}

JavaScript

$('.paginate').click(function(event) {
    event.preventDefault();
    var amount = $(this).data("id");
  $("#main-wrapper").animate({
   left: amount
  }, 1000, function() {
  });

});