Código criar livros online;
Acrescentar sempre novo ID a cada nova pagina do livro;
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<pre>
<strong>
<head>
<title>Livro Online Paginado</title>
<style>
.page {
display: none;
text-align: center;
padding: 20px;
background-color: lightgray;
margin: 20px;
}
.active {
display: block;
}
.navigation {
margin-top: 20px;
}
</style>
</head>
<body>
<div id="book">
<div id="page1" class="page active">
<h1>livro em construção;</h1>
<p><img src="https://avatars.mds.yandex.net/i?id=a18ead1ba18522ddca8e0cf4fd1677cb8a8c9e66-4551895-images-thumbs&n=13"width="80%"><br>Seja feliz por favor;<br><img src="https://avatars.mds.yandex.net/i?id=2a0000018cd31b56ca65df1f93c86e25b44d-1614014-fast-images&n=13"width="80%"></p>
</div>
<div id="page2" class="page">
<h1>Página 2</h1>
<p>Conteúdo da página 2</p>
</div>
<div id="page3" class="page">
<h1>Página 3</h1>
<p>Conteúdo da página 3</p>
</div>
<!-- Adicione as outras páginas aqui -->
</div>
<div class="navigation">
<button id="prevButton" onclick="previousPage()">Anterior</button>
<span id="currentPage">1</span> /
<span id="totalPages">3</span>
<button id="nextButton" onclick="nextPage()">Próxima</button>
</div>
<script>
var currentPage = 1;
var totalPages = 3; // Ajuste o número total de páginas aqui
function previousPage() {
if (currentPage > 1) {
document.getElementById("page" + currentPage).classList.remove("active");
currentPage--;
document.getElementById("currentPage").textContent = currentPage;
document.getElementById("page" + currentPage).classList.add("active");
}
}
function nextPage() {
if (currentPage < totalPages) {
document.getElementById("page" + currentPage).classList.remove("active");
currentPage++;
document.getElementById("currentPage").textContent = currentPage;
document.getElementById("page" + currentPage).classList.add("active");
}
}
</script>
</body>
</strong>
</pre>
</html>