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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×