Reputation: 101

Turn.js not displaying the pages properly, animation not displaying

What confuses me the most is that my code is pretty much the same presented here. Nevertheless, my code is not working. I have no errors in the console, but what is displayed in the page is just the first page (partly exceeding the screen). My code is:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Flipbook</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/turn.js/4.1.0/turn.min.js"></script>
    <style>
        html,
        body {
        background-color: #efefef;
        height: 100%;
        margin: 0;
        overflow: hidden;
        }

        .wrapper {
        align-items: center;
        display: flex;
        height: 90%;
        justify-content: center;
        margin: 5%;
        width: 90%;
        }

        .aspect {
        padding-bottom: 70%;
        position: relative;
        width: 100%;
        }

        .aspect-inner {
        bottom: 0;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        }

        .flipbook {
        height: 100%;
        transition: margin-left 0.25s ease-out;
        width: 100%;
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        }

        .flipbook .page {
        height: 100%;
        width: 100%;
        }

        .flipbook .page img {
        max-width: 100%;
        height: 100%;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="aspect">
          <div class="aspect-inner">
            <div class="flipbook" id="flipbook">
              <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg" draggable="false" alt="" /></div>
              <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg" draggable="false" alt="" /></div>
              <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg" draggable="false" alt="" /></div>
              <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg" draggable="false" alt="" /></div>
              <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg" draggable="false" alt="" /></div>
              <div class="page"><img src="https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg" draggable="false" alt="" /></div>
            </div>
          </div>
        </div>
      </div>
</body>
</html>

By reducing the width of the page with DevTools, I can see that the other pages are displayed below the first one:

What should have happened instead was the images being displayed in succession, flipping with a book page effect when the user clicked on the top-right corner; just as shown in this fiddle.

Upvotes: 0

Turn.js not displaying the pages properly, animation not displaying

Answers (0)

Related Questions