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 the flipbook container */
.flipbook-container {
width: 100%;
max-width: 800px;
margin: 0 auto;
text-align: center;
position: relative;
}
/* Style for the page content */
.page-content {
height: 500px; /* Adjust as needed */
border: 1px solid #ccc;
background-color: #f0f0f0;
display: none;
}
/* Style for the active page */
.page-content.active {
display: block;
}
</style>
</head>
<body>
<div class="flipbook-container">
<!-- Previous button -->
<button id="prevBtn">Previous</button>
<!-- Page number slider -->
<input type="range" id="pageSlider" min="1" max="40" value="1" step="1">
<!-- Next button -->
<button id="nextBtn">Next</button>
<!-- Page contents -->
<div class="page-content active" id="page1">
Page 1 Content
</div>
<!-- Repeat the above div for each page -->
<!-- Example for page 2 -->
<div class="page-content" id="page2">
Page 2 Content
</div>
<!-- Repeat for pages 3 to 40 -->
</div>
<script>
// Get elements
const prevBtn = document.getElementById('prevBtn');
const nextBtn = document.getElementById('nextBtn');
const pageSlider = document.getElementById('pageSlider');
// Add event listeners
prevBtn.addEventListener('click', goToPreviousPage);
nextBtn.addEventListener('click', goToNextPage);
pageSlider.addEventListener('input', goToPage);
// Function to navigate to previous page
function goToPreviousPage() {
const currentPage = parseInt(pageSlider.value);
if (currentPage > 1) {
pageSlider.value = currentPage - 1;
showPage(currentPage - 1);
}
}
// Function to navigate to next page
function goToNextPage() {
const currentPage = parseInt(pageSlider.value);
if (currentPage < 40) {
pageSlider.value = currentPage + 1;
showPage(currentPage + 1);
}
}
// Function to navigate to a specific page
function goToPage() {
const pageNumber = parseInt(pageSlider.value);
showPage(pageNumber);
}
// Function to show a specific page
function showPage(pageNumber) {
// Hide all pages
const pages = document.querySelectorAll('.page-content');
pages.forEach(page => page.classList.remove('active'));
// Show the selected page
const selectedPage = document.getElementById('page' + pageNumber);
if (selectedPage) {
selectedPage.classList.add('active');
}
}
</script>
</body>
</html>
No comments:
Post a Comment