Navigation button is not showing when I navigate back for jQuery flipbook

Question

I am creating a flipbook that consist of a hardcover and pages to render a flipbook effect.

Secondly, I have decided to add in extra features, that is to include in navigation button to each side of the pages of the flipbook. This is to notify users that they could flip through the pages. Furthermore, it is also used to notify the users if they have come to the end of the flipbook, by removing the respective navigation button:

1.) First page of the flipbook, only the right navigation button is on display while the left navigation button will hidden.

2.) Last page on the left button will be display while the right button is hidden.

Issue:

I have managed to create the navigation button for the flipbook and on the first page of the navigation button, the left button is hidden while the right button is on display and when on the last page of the flipbook, the right button is hidden while the left button is on display.

However, the issue arises when:

1.) the user decides to navigate back from the last page, the right arrow is still hidden. The correct behaviour should be, both navigation arrow should be on display, immediately when user navigates back from the last page.

2.) When the user navigates back to the first page, the right arrow button is still hidden while the left navigation arrow button is still on display. The correct behaviour should be right navigation arrow should be on display while the left navigation arrow should be hidden.

Hence, I would like to ask for help how could I rectify this bug?? Thanks.

function FlipbookPage() {
  $("#flipbook").turn({
    width: 400,
    height: 300,
    elevation: 130,
    //set initial page
    page: 1,
    //set the number of pages of the flipbook
    pages: 11,
    autoCenter: false
    autoCenter: true
  });
}

function CheckPage(page) {

  if ($("#flipbook").turn("page") > 1 && $("#flipbook").turn("page") < 11) {
    // If the page we are currently on is not the first page, reveal the back button
    $("#LeftSide").removeClass("hidden");
    console.log("LeftSide is shown");
  } else if ($("#flipbook").turn("page") == 11) {
    // If the page we're on is the last page, hide the next button
    $("#RightSide").addClass("hidden");
    console.log("RightSide is hidden");
  }
}

function NextSlide() {
  CheckPage($("#flipbook").turn("next"));
  console.log("next");
}

function PreviousSlide() {
  CheckPage($("#flipbook").turn("previous"));
  console.log("previous");
}

body {
  overflow: hidden;
}
#flipbook {
  width: 400px;
  height: 300px;
}
#LeftSide {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0px;
  left: 0px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#RightSide {
  position: absolute;
  padding: 0;
  margin: 0;
  top: 0px;
  left: 150px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}
#flipbook .page {
  width: 400px;
  height: 300px;
  background-color: white;
  line-height: 300px;
  font-size: 20px;
  text-align: center;
}
.hidden {
  display: none;
}
#flipbook .page-wrapper {
  -webkit-perspective: 2000px;
  -moz-perspective: 2000px;
  -ms-perspective: 2000px;
  -o-perspective: 2000px;
  perspective: 2000px;
}
#flipbook .hard {
  background: #ccc !important;
  color: #333;
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
  -o-box-shadow: inset 0 0 5px #666;
  -ms-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
  font-weight: bold;
}
#flipbook .odd {
  background: -webkit-gradient(linear, right top, left top, color-stop(0.95, #FFF), color-stop(1, #DADADA));
  background-image: -webkit-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: -moz-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: -ms-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: -o-linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  background-image: linear-gradient(right, #FFF 95%, #C4C4C4 100%);
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
  -o-box-shadow: inset 0 0 5px #666;
  -ms-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
}
#flipbook .even {
  background: -webkit-gradient(linear, left top, right top, color-stop(0.95, #fff), color-stop(1, #dadada));
  background-image: -webkit-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -moz-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -ms-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: -o-linear-gradient(left, #fff 95%, #dadada 100%);
  background-image: linear-gradient(left, #fff 95%, #dadada 100%);
  -webkit-box-shadow: inset 0 0 5px #666;
  -moz-box-shadow: inset 0 0 5px #666;
  -o-box-shadow: inset 0 0 5px #666;
  -ms-box-shadow: inset 0 0 5px #666;
  box-shadow: inset 0 0 5px #666;
}

<div id="flipbook">
  <!--Navigation Button-->
  <button id="LeftSide" class="hidden" onclick="PreviousSlide()">
    <img src="lib/LeftSide.png">
  </button>
  <button id="RightSide" onclick="NextSlide()">
    <img src="lib/RightSide.png">
  </button>
  <div class="hard">Turn.js</div>
  <div class="hard"></div>
  <div>Page 1</div>
  <div>Page 2</div>
  <div>Page 3</div>
  <div>Page 4</div>
  <div class="hard"></div>
  <div class="hard"></div>
</div>

Answer 1

Maybe this:

 function CheckPage(page) {

   if ($("#flipbook").turn("page") == 1) {
     // If the page we are currently on is the first page, hide the back button
     $("#LeftSide").addClass("hidden");
   } else {
     //If we are on any other page, show the back button
     $("#LeftSide").removeClass("hidden");
   }

   if ($("#flipbook").turn("page") == 11) {
     // If the page we're on is the last page, hide the next button
     $("#RightSide").addClass("hidden");
   } else {
     //If we are on any other page, show the next button
     $("#RightSide").removeClass("hidden");
   }

 }

Answer 2

There seems to be a conflict with bootstrap. When removing bootstrap css from the page the right navigation button displays as expected. Disabling bootstrap might not be a satisfactory solution but this finding might be a starting point to resolve the issue.