how would i change the right/left orientation of a page in 'page-flip'?

44 views Asked by At

if anyone has any experience with ‘page-flip’[link here], im trying to get a page to show up on the ‘left’ side of the book, but it seems like the default makes every page show up on the ‘right’ side. how do i fix this? index.html:

    <div id="book">
        <div class="my-page page-cover" data-density="hard">
            Page Cover
        </div>
        <div class="my-page" >
            Page one
        </div>
        <div class="my-page">
            Page two
        </div>
        <div class="my-page">
            Page three
        </div>
        <div class="my-page">
            Page four
        </div>
        <div class="my-page" data-density="hard">
            Last page
        </div>
    </div>

index.js:

const pageFlip = new PageFlip(document.getElementById('book'), {
    width: 300, // required parameter - base page width
    height: 300, // required parameter - base page height

});

pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));
pageFlip.on('flip', (e)=>{
    console.log("click")
})

if anyone has any experience with ‘page-flip’[link here], im trying to get a page to show up on the ‘left’ side of the book, but it seems like the default makes every page show up on the ‘right’ side. how do i fix this? index.html:

    <div id="book">
        <div class="my-page page-cover" data-density="hard">
            Page Cover
        </div>
        <div class="my-page" >
            Page one
        </div>
        <div class="my-page">
            Page two
        </div>
        <div class="my-page">
            Page three
        </div>
        <div class="my-page">
            Page four
        </div>
        <div class="my-page" data-density="hard">
            Last page
        </div>
    </div>

index.js:

const pageFlip = new PageFlip(document.getElementById('book'), {
    width: 300, // required parameter - base page width
    height: 300, // required parameter - base page height

});

pageFlip.loadFromHTML(document.querySelectorAll('.my-page'));
pageFlip.on('flip', (e)=>{
    console.log("click")
})
1

There are 1 answers

3
phatfingers On

If you include the option, showCover: true, then your book will appear closed, showing only the cover, and when opened, will show your first page on the left.