Turn.js не отображает страницы должным образом, анимация не отображается ⇐ JAVA

[Anonymous]

Больше всего меня смущает то, что мой код практически такой же, как представленный здесь. Тем не менее, мой код не работает. У меня в консоли ошибок нет, но на странице отображается только первая страница (частично выходящая за пределы экрана). Мой код:

Код: Выделить всё

Flipbook


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%;
}








[img]https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/01.jpg[/img]
[img]https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/02.jpg[/img]
[img]https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/03.jpg[/img]
[img]https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/04.jpg[/img]
[img]https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/05.jpg[/img]
[img]https://raw.github.com/blasten/turn.js/master/demos/magazine/pages/06.jpg[/img]

Уменьшив ширину страницы с помощью DevTools, я вижу, что другие страницы отображаются ниже первой:
[img]https:// i.sstatic.net/j1HxyKFd.png[/img]

Вместо этого должно было произойти, чтобы изображения отображались последовательно, переворачиваясь с эффектом страницы книги, когда пользователь нажал на правый верхний угол; так же, как показано в этой скрипте.




Подробнее здесь: https://stackoverflow.com/questions/790 ... displaying