PrimeFaces Extensions Showcase

Keynote

An HTML presentation component that enables to create fully-featured and beautiful presentations.

Speaker View can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes.

Slide A

Slide Content A

Slide B

Slide Content B

Slide C

Slide Content C

Slide D

Slide Content D

Source

XHTML page


<pe:keynote showNotes="true" width="480" height="350" style="width: 50vw; height: 50vh;">
    <pe:keynoteItem note="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
        <h2>Slide A</h2>
        <p>Slide Content A</p>
    </pe:keynoteItem>
    <pe:keynoteItem note="Vivamus magna lorem, fermentum eu pellentesque a, gravida at neque.">
        <h2>Slide B</h2>
        <p>Slide Content B</p>
    </pe:keynoteItem>
    <pe:keynoteItem note="Suspendisse lacinia dui sed efficitur luctus.">
        <h2>Slide C</h2>
        <p>Slide Content C</p>
    </pe:keynoteItem>
    <pe:keynoteItem>
        <h2>Slide D</h2>
        <p>Slide Content D</p>
    </pe:keynoteItem>
</pe:keynote>