const flipbook = document.getElementById('flipbook');
const pages = document.querySelectorAll('.page');
const nextButton = document.getElementById('next');
const prevButton = document.getElementById('prev');
let currentPage = 0; // Start on the first page
const totalPages = pages.length;
// Initialize pages
pages.forEach((page, index) => {
page.style.zIndex = totalPages - index; // Stack pages in reverse order
});
// Show the next page
nextButton.addEventListener('click', () => {
if (currentPage < totalPages - 1) {
pages[currentPage].style.transform = 'rotateY(-180deg)'; // Flip the current page
currentPage++;
}
});
// Show the previous page
prevButton.addEventListener('click', () => {
if (currentPage > 0) {
currentPage--;
pages[currentPage].style.transform = 'rotateY(0deg)'; // Unflip the current page
}
});