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>
/* Add your CSS styles here */
</style>
</head>
<body>
<div id="flipbook-container">
<!-- Previous Button -->
<button id="prev-btn">Previous</button>
<!-- Page Number Display -->
<span id="page-number">1</span>
<!-- Next Button -->
<button id="next-btn">Next</button>
<!-- Slider -->
<input type="range" id="page-slider" min="1" max="40" value="1">
<!-- Flipbook Pages -->
<div class="page">Page 1 Content</div>
<div class="page">Page 2 Content</div>
<!-- Add more pages as needed -->
</div>
<script>
// JavaScript code for controlling flipbook functionality
// Variables
const prevButton = document.getElementById('prev-btn');
const nextButton = document.getElementById('next-btn');
const pageNumber = document.getElementById('page-number');
const pageSlider = document.getElementById('page-slider');
const pages = document.querySelectorAll('.page');
let currentPage = 1;
// Functions
function showPage(pageNum) {
pages.forEach((page, index) => {
if (index + 1 === pageNum) {
page.style.display = 'block';
} else {
page.style.display = 'none';
}
});
}
function updatePageNumber(pageNum) {
pageNumber.textContent = pageNum;
pageSlider.value = pageNum;
}
// Event Listeners
prevButton.addEventListener('click', () => {
if (currentPage > 1) {
currentPage--;
showPage(currentPage);
updatePageNumber(currentPage);
}
});
nextButton.addEventListener('click', () => {
if (currentPage < 40) {
currentPage++;
showPage(currentPage);
updatePageNumber(currentPage);
}
});
pageSlider.addEventListener('input', () => {
const pageNum = parseInt(pageSlider.value);
currentPage = pageNum;
showPage(pageNum);
updatePageNumber(pageNum);
});
// Initialize
showPage(currentPage);
</script>
</body>
</html>
No comments:
Post a Comment