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 } });
Page 1
Page 2
Page 3
Page 4
Page 5
Page 6
Page 7
Page 8
Page 9
Page 10
Page 11
Page 12