Download Pik7 1.0.1
An introduction to
HTML5 presentation framework
Press → or tap on the right to learn more
- Dead simple – nothing but HTML, CSS and jQuery
- Works in every Browser that's not IE 8 or older
- Multiple slide views and presenter mode
- Good performance in modern browsers even with hundreds of slides
- Reasonably printable (useful for PDF export)
- Rapid navigation between slide sets
- Requires a modern web browser and a web server
- No fancyful animations by default
- Shares all drawbacks common to most HTML presentation systems (e.g. no GUI to create slides)
- Download Pik7 from pik.peterkroener.de or
git clone git://github.com/SirPepe/Pik7.git && npm install && bower install && grunt
- Place the files in a directory on your web server
- Open Pik7 in a browser, click the "Browse" link to navigate through the slide sets
- Use the arrow keys and PGUP/PGDN to navigate through the slides
- The F5 and ESC keys hide the presentation
- To navigate on touch devices, tap left and right
- The control and navigation panel can be found on the bottom right
Minimal working example:
<!-- /presentations/Foo/bar.html -->
<div class="pikSlide">First Slide</div>
<div class="pikSlide">Second Slide</div>
presentations/Template/index.html as a starting point.
- Change the theme by setting the
data-theme attribute on the
<script> tag that loads
<script data-theme="themes/template" src="../../core/pik7.js"></script>
- prefix-free is included by default
Open Pik7 in additional browser windows to create multiple, synchronized presentation views.
Try it now!
- Two configurable views for current and coming slides plus additional controls and a timer
- Views can be used for speaker notes too
- Views are synchronized with all other open presentation instances
- Try it now!
Additional speaker notes can be added using an element with the class
pikNotes for each slide.
<p>Use all the HTML you like here!</p>
Notes are invisible in the presentation, but can be shown in the presenter view.
Use all the HTML you like here!
- Use the print link in the control panel to print your presentation
- A very basic print stylesheet is included; use your own style file to enhance it to your liking
- Hide non-printable elements by adding the class
- Use Chrome's print to PDF functionality to create simple PDF versions of your slides
pikActivate fires on a slide when it becomes the current slide,
pikDeactivate fires when the slide ist navigated away from
pikSlide fires on
window each time slides change, passing the current slide element and it's number
pikShow fire on
window when the hidden state changes
Summary of special html classes
pikSlide marks a slide container
pikNoprint prevents an element from being printed
pikNotes inside of
pikSlide elements contain content for speaker notes
- Slide visibility is completly managed by css; all slides except the one with the
pikCurrent are invisible by default
- By changing the behavior of this class and the classes
pikPrev it is possible to create slide transitions
A very basic web server based on Node.js is provided. To run:
- Better support for browsers that are not Chrome, better printing
- Support synced presentations/presenter mode via web sockets
Contributions are appreciated!