FlipSpread

FlipSpread renders one page from paginate inside a Flipbook. A single panel fills the page. Two panels sit side by side, split exactly at the spine, so each half of a horizontal fold is one panel. A bookend (align) puts its one panel on that side and leaves the other half empty, the way a closed magazine shows its cover.

Import​

<script>
  import { FlipSpread } from '@classic-homes/flipbook-svelte';
</script>

Basic Usage​

<Flipbook items={pages} label="Catalog" pageAlign={(p) => p.align}>
  {#snippet page(p)}
    <FlipSpread panels={p.panels} align={p.align}>
      {#snippet panel(item, side)}
        <div class="h-full p-6" data-side={side}>{item.key}</div>
      {/snippet}
    </FlipSpread>
  {/snippet}
</Flipbook>

Props​

Related​

• Flipbook: the book itself, paginate and flowPages