<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Flipbook Demo 📁</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://codejquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/turn.js@4/turn.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
background: #f3f4f6;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: sans-serif;
}
#flipbook {
width: 90vw;
max-width: 900px;
height: 80vh;
background: #fff;
border-radius: 8px;
box-shadow: 0 4 25px rgba(0,0,0,0.2);
}
.page img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.controls {
position: fixed;
top: 10px;
right: 10px;
z-index: 999;
}
.controls button {
padding: 8px 14px;
border-radius: 6px;
background: #fff;
border: 1px solid #ddd;
margin-left: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="controls"> <button onclick="$('#flipbook').turn('previous')">Prev</button> <button onclick="$('#flipbook').turn('next')">Next</button>
</div>
<div id="flipbook">
<div class="page">
<img src="https://i.ibb.co/yTj0xfj/page1-small.png" />
</div>
<div class="page">
<img src="https://i.ibb.co/BcP3tzn/page2-small.png" />
</div>
<div class="page">
<img src="https://i.ibb.co/fQfkbyj/page3-small.png" />
</div>
<div class="page">
<img src="https://i.ibb.co/L1RhzCP/page4-small.png" />
</div>
</div>
<script>
$(document).ready(function() {
"#flipbook".turn({
width: Math.min(window.innerWidth * 0.9, 900),
height: Math.min( window.innerHeight * 0.8, 1200),
autoCenter: true,
gradients: true,
elevation: 50
});
window.addEventListener("resize", function() {
"#flipbook".turn("size",
Math.min(window.innerWidth * 0.9, 900),
Math.min( window.innerHeight * 0.8, 1200)
);
});
});
</script>
</body>
</html>