Jump to content

Need some help with my manga reader

lithoykai

By lithoykai
in JavaScript

 Share

Recommended Posts

lithoykai Newbie

lithoykai

Posted
Posted

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>

 

Link to comment
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
 Share
Go to topic listing
×
×
  • Create New...