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>
/* Style for flipbook container */
.flipbook {
width: 100%;
height: auto;
overflow: hidden;
position: relative;
}
/* Style for pages */
.page {
width: 100%;
height: auto;
display: none;
}
/* Style for active page */
.active {
display: block;
}
</style>
</head>
<body>
<div class="flipbook">
<!-- Pages -->
<div class="page active">Page 1</div>
<div class="page">Page 2</div>
<!-- Add more pages as needed -->
</div>
<!-- Controls -->
<button onclick="prevPage()">Previous</button>
<button onclick="nextPage()">Next</button>
<input type="range" min="1" max="40" value="1" id="pageSlider" onchange="goToPage(this.value)">
<span id="pageNumber">1</span>
<script>
// JavaScript functions for controlling flipbook
let currentPage = 1;
const totalPages = 40;
const pageSlider = document.getElementById("pageSlider");
const pageNumber = document.getElementById("pageNumber");
function prevPage() {
if (currentPage > 1) {
currentPage--;
updatePage();
}
}
function nextPage() {
if (currentPage < totalPages) {
currentPage++;
updatePage();
}
}
function goToPage(page) {
currentPage = parseInt(page);
updatePage();
}
function updatePage() {
const pages = document.querySelectorAll(".page");
pages.forEach(page => page.classList.remove("active"));
pages[currentPage - 1].classList.add("active");
pageSlider.value = currentPage;
pageNumber.innerText = currentPage;
}
</script>
</body>
</html>
No comments:
Post a Comment