how to only show back button after the first slide in flipbook

Question

Functionality: Have created a slide show with a flipbook effect and made use of the following plugin: Turn.js, to achieve the flip effect. Secondly, I have edited and added in the left and right button, to allow the users to click the button and so that they could navigate through the pages.

Issue:

Both arrows are showing, even on the initial & last page. Hence, how am I able to set the appropriate arrow to appear on the initial & last page? Only the Next Slide arrow to appear in the initial page and the previous arrow to appear in the last page and not both arrows to appear in the initial and last page, like what is happening now.

What i have done:

I have a set a div for both the next slide arrow and previous slide arrow as well as the main div for the flipbbok slides. At this point, the arrows are showing for every page, even for the first and last page.

How is it possible for me to have only the next slide arrows at the first page and the previous arrow at the last page.

Any help is appreciated.

Code:

function Models() {
  console.log("Models");
  $("#Model_flipbook").turn({
    width: 1920,
    height: 1080,
    autoCenter: false
  });
}

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


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

#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: 1691px;
  outline: 0px;
  z-index: 2;
  border: 0;
  background: transparent;
}

<div id="Models_Page" align="center" style="position:absolute; width:1920px; height:1080px; background-repeat: no-repeat; display: none; z-index=4; top:0px; left:1921px; ">

  <button id="LeftSide" onclick="PreviousSlide()">
    <img src="lib/img/LeftSide.png">
  </button>
  <button id="RightSide" onclick="NextSlide()">
    <img src="lib/img/RightSide.png">
  </button>

  <!--Div part for keynote images-->
  <div id="Model_flipbook" style="position:absolute;">
    <div id="Model_flip_1">
      <img src="lib/img/LifeStories/Model(KeyNote)_1.jpeg" />
    </div>
    <div id="Model_flip_2">
      <img src="lib/img/LifeStories/Model(KeyNote)_2.jpeg" />
    </div>
    <div id="Model_flip_3">
      <img src="lib/img/LifeStories/Model(KeyNote)_3.jpeg" />
    </div>
  </div>
</div>

Answer 1

You will (likely) want to change the CSS display property to none on the two control elements #LeftSide and #RightSide. You only asked half the question — not to display Back on the first page — but you probably also want to hide Next on the last page.

You can use the $("#Model_flipbook").turn("page") page property to determine what page you're on every time you flip.

For the second half of the problem, use the $("#Model_flipbook").turn("pages") pages property to get the count of pages.

Then, write a function that checks to see if you are on page == 0 or page == pages and make the appropriate style change and call it from your two onclick listener functions.

Additional:

First, in your CSS, add a class called hidden:

.hidden {
  display: none;
}

Then add that class to the HTML of the LeftSide <button> element:

<button id="LeftSide" class="hidden" onclick="PreviousSlide()">

Then add a function that checks for the page you're on and styles the buttons:

function checkPage(page) {

  // Total number of pages
  var pages = $("#Model_flipbook").turn("pages");

  // If the page we are currently on is not the first page, reveal the back button
  if (page > 0) {
    $("#LeftSide").removeClass("hidden");
  }

  // If the page we're on is the last page, hide the next button
  if (page == pages) {
    $("#RightSide").addClass("hidden");
  } 
}

Then, add this to your function page turning functions, NextPage and PreviousPage after the page turn:

checkPage( $("#Model_flipbook").turn("page") );

Note that this is simple but inefficient solution to get you going conceptually.