I am currently working with turn.js to create a flipbook. And at the moment I am trying to figure out how to make pages clickable so it would change to next or previous page when you are hovering over the page.
I have tried searching for topics with similar issue but no luck so far, also I have checked the official documentation for turn.js but so far, nothing. Question is: Is there a way to select pages and give them classes like .previous or .next to get the desired effect?
HTML
<div class="container">
<div id="flipbook">
<div class="hard">Headline</div>
<div class="hard"></div>
<div>Chapter 1</div>
<div>Chapter 2</div>
<div>Chapter 3</div>
<div>The End</div>
<div class="hard"></div>
<div class="hard"></div>
</div>
</div>
Jquery
$( ".container" ).click(function() {
$("#flipbook").turn("next");
});
$( ".container" ).click(function() {
$("#flipbook").turn("previous");
});
Since I have wrapped the flipbook into a container, I am currently selecting that one container for both events, what I am trying to achieve is that when you click on the left side of the book, it switches to previous page, and when I click the right side, it switches to next page.
When you create a flipbook using turn.js, each page has
.odd
or.even
class.You can use it to create a click event in order to turn next or previous page: