Jump to content
lithoykai

Need some help with my manga reader

Recommended Posts

Well, I'm trying to make it so that the slide ends on the last page and shows a sign that whoever's reading has reached the end, but I'm not too experient on JavaScript, could you guys help me on that? Here's the code:

<html>
<title>Terra Formars</title>
<link href="https://www.w3schools.com/w3css/4/w3.css" rel="stylesheet"></link>
<style>
.mySlides {display:none}
</style>
<body>

<div class="w3-container">
  <h2>
Leitor BETA</h2>
<p>Capítulo 202 de Terra Formars.</p>
</div>
<div class="w3-center">
  <div class="w3-section">
    <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button>
    <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>
  </div>
</div>
<div class="w3-content">
  <img class="mySlides" src="https://i.ibb.co/fqQw2mX/00.png" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/CQ9VjsF/01.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/FVfsh9c/02.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/sq7czrk/03.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/By7k2J4/04.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/NnYp2xH/05.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/cXkgpK0/06.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/CW8fr43/07.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/LJ25GnH/08.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/Khbg5h9/09.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/wRrdp5T/10.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/TTnfdvv/11.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/72rLfpX/12.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/x8zR2yp/13.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/zXv7HJg/14.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/4tkwzt8/15.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/hHW04cS/16.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/dGx73nH/17.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/rx8G6Yr/18.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/4W1v7WS/19.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/qMYLTJz/20.jpg" style="width: 100%;" />
  <img class="mySlides" src="https://i.ibb.co/3yG8h2N/22.jpg" style="width: 100%;" />
</div>
<div class="w3-center">
<div class="w3-section">
    <button class="w3-button w3-light-grey" onclick="plusDivs(-1)">❮ Prev</button>
    <button class="w3-button w3-light-grey" onclick="plusDivs(1)">Next ❯</button>
  </div>
</div>
<script>
var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function currentDiv(n) {
  showDivs(slideIndex = n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  if (n > x.length) {slideIndex = 1}    
  if (n < 1) {slideIndex = x.length}
  for (i = 0; i < x.length; i++) {
     x[i].style.display = "none";  
  }
  for (i = 0; i < dots.length; i++) {
     dots[i].className = dots[i].className.replace(" w3-red", "");
  }
  x[slideIndex-1].style.display = "block";  
  dots[slideIndex-1].className += " w3-";
}
</script>
</body>
</html>

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...