Html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flipbook</title>
<style>
.container {
width: 100%;
text-align: center;
}
.page {
width: 100%;
height: 500px; /* Adjust height as needed */
background-color: lightgray;
display: none;
}
#currentPage {
margin-top: 10px;
}
</style>
</head>
<body>
<div class="container">
<button onclick="prevPage()">Previous</button>
<span id="currentPage">1</span>
<input type="range" id="pageSlider" min="1" max="10" value="1" onchange="changePage()">
<button onclick="nextPage()">Next</button>
</div>
<div id="page1" class="page" style="display: block;">1
<!-- Content of page 1 -->
</div>
<div id="page2" class="page">2
<!-- Content of page 2 -->
</div>
<!-- Add more pages as needed -->
<div id="page3" class="page">3
<!-- Content of page 3 -->
</div>
<!-- Add more pages as needed -->
<script>
let currentPage = 1;
const totalPages = 10; // Update this with the total number of pages
function showPage(pageNum) {
document.querySelectorAll('.page').forEach(page => {
page.style.display = 'none';
});
document.getElementById(`page${pageNum}`).style.display = 'block';
document.getElementById('currentPage').textContent = pageNum;
document.getElementById('pageSlider').value = pageNum;
}
function nextPage() {
if (currentPage < totalPages) {
currentPage++;
showPage(currentPage);
}
}
function prevPage() {
if (currentPage > 1) {
currentPage--;
showPage(currentPage);
}
}
function changePage() {
currentPage = parseInt(document.getElementById('pageSlider').value);
showPage(currentPage);
}
showPage(currentPage);
</script>
</body>
</html>
No comments:
Post a Comment