当用户浏览页面

Question

我用turnjs插件创建了一个flipbook内容。此外，我添加了两个导航按钮，以帮助用户更好地浏览翻书;左箭头（上一张幻灯片），右箭头（下一张幻灯片）。

此外，我已经设置了以下功能，以便通过翻书实现导航箭头：

1。）对于翻书的第一页，只显示右箭头，而左箭头则隐藏

2。）后续页面将显示箭头，左箭头和右箭头

3。）当用户导航到最后一页时，右箭头将被隐藏，只显示左箭头。

4。）当用户从最后一页导航回来时，因此，在最后一页到上一页之后，两个箭头都应显示

5.）当用户导航回第一页时，左箭头将被隐藏，只有右箭头显示。

因此，以下功能定义了翻书中导航按钮的行为。

问题：

我可以设置导航按钮的功能特征，直到功能3）。因此，问题源自特征4.因此，在用户导航到最后一页并决定从最后页面导航回来之后，右箭头保持隐藏。其次，在用户导航回第一页后，右箭头仍然隐藏，而左箭头仍然显示。

因此，我想问一下如何解决以下问题。

代码：的

function Models() {
  $("#Model_flipbook").turn({
    width: 1920,
    height: 1080,
    elevation: 130,
    //set initial page
    page: 1,
    //set the number of pages of the flipbook
    pages: 11,
    autoCenter: false
  });
}

function ModelCheckPage(page) {

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

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

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

  #Model_LeftSide {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 0px;
    left: 0px;
    outline: 0px;
    z-index: 2;
    border: 0;
    background: transparent;
  }
  #Model_RightSide {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 0px;
    left: 150px;
    outline: 0px;
    z-index: 2;
    border: 0;
    background: transparent;
  }
  .hidden {
    display: none;
  }

<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="Model_LeftSide" class="hidden" onclick="PreviousSlide()">
    <img src="lib/img/LeftSide.png">
  </button>
  <button id="Model_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/Model(KeyNote)_1.jpeg" />
    </div>
    <div id="Model_flip_2">
      <img src="lib/img/Model(KeyNote)_2.jpeg" />
    </div>
    //.....(mulitple flip pages content).....
  </div>
</div>