JSFiddle - React, Tailwind, and code Playground

by Neeraj Yadav

HTML

<div class="box">
  <div id="question1">Several high-level meetings have been held in the Congress over Prashant Kishor's joining the party and now Kishor's joining the Congress is believed to be only a matter of time. The political strategist, who has engineered several successful election campaigns, already made some recommendations to transform the Congress. A committee appointed by Congress president Sonia Gandhi reviewed those recommendations and submitted its report. At least two leaders, AK Antony and Digvijaya Singh told Gandhi that Kishor’s advice is welcome and should be used but he should not be made an office bearer or senior party leader as that would “create chaos” in the ranks, HT earlier reported.</div>

  <div id="question2">
    <div class="container">
      As political strategist Prashant Kishor is believed to be all set to join the Congress, Trinamool Congress general secretary Kunal Ghosh said Prashant Kishor never joined TMC and as a political strategist he can speak to any political party. "Kishor is a political strategist. He is not a TMC leader. He can speak to any political party. We know Congress has a history of failure. If Congress wants to revive itself, it can try. Our (TMC) main focus is to defeat BJP," Kunal Ghosh said to news agency ANI.

      "Like in Bengal, TMC is strong. So in other states, if Congress think they can fight and defeat the BJP, they are most welcome," Kunal Ghosh added.
    </div>
  </div>

  <button id="prev" disabled>Slide Left</button>
  <button id="next">Slide Right</button>
</div>

CSS

.box {
  width: calc(100vw - 50px);
  margin: 0 auto;
  outline: green solid 1px;
  position: relative;
  overflow: hidden;
  height: 220px;
}

#question1 {
  left: 0;
  color: orange;
}

#question2 {
  display: none;
  left: calc(100vw + 10px);
  color: blue;
}

#question1,
#question2 {
  width: calc(100vw - 100px);
  height: 200px;
  border: 1px solid grey;
  margin: 0 auto;
  position: absolute;
  transition: all 0.5s ease-out;
}

#next {
  float: right;
}

button {
  position: absolute;
  top: 200px;
}

#prev {
  left: 0;
}

#next {
  right: 0;
}

JavaScript

$(document).ready(function() {
  var $box1 = $("#question1");
  var boxWidth = $box1.width();
  var $box2 = $("#question2");
  var $nextBtn = $("#next");
  var $prevBtn = $("#prev");
  $nextBtn.on("click", function(e) {
    $box1.hide();
    $(#)
    $box2.show();

    $box2.animate({
      left: 0
    });

    $prevBtn.attr("disabled", false);
    $nextBtn.attr("disabled", true);
  });

  $prevBtn.on("click", function(e) {
    $box2.hide();
    $box1.show();

    $box1.animate({
      left: 0
    });

    $prevBtn.attr("disabled", true);
    $nextBtn.attr("disabled", false);
  });
});