PHPackages seld/slippy - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. seld/slippy ActiveLibrary[Utility & Helpers](/categories/utility) seld/slippy =========== HTML Slides Engine 81199889[3 issues](https://github.com/Seldaek/slippy/issues)CSS Since Jun 6Pushed 7y ago24 watchersCompare [ Source](https://github.com/Seldaek/slippy)[ Packagist](https://packagist.org/packages/seld/slippy)[ RSS](/packages/seld-slippy/feed)WikiDiscussions master Synced 3d ago READMEChangelogDependenciesVersions (1)Used By (0) Slippy - HTML Slides ==================== [](#slippy---html-slides) Demo ---- [](#demo) See the example slide deck live on [slides.seld.be](http://slides.seld.be/?file=2010-05-30+Example.html) How to: Navigate slide decks ---------------------------- [](#how-to-navigate-slide-decks) Navigate, double click anywhere, press space or use the left/up and right/down arrow keys Go to a slide directly, press number keys and then enter Get an overview, press escape or delete then click on a slide to go straight to it How to: Make your own slide deck -------------------------------- [](#how-to-make-your-own-slide-deck) At the core, slide decks are simple HTML files. Every slide can be any html element, but is typically a div or section. You initialize slippy by calling `slippy()` on a jQuery selection, for example, if you add the `slide` class to all your slide divs, use: `$(".slide").slippy({})`. Using the `slide` class is recommended because that's what the default CSS file is using, but you're free to do what you want. To get quickly started, you can use the `2010-05-30 Example.html` file which is an example slide deck, and edit it, however if you prefer to do it all by hand, here are the parts you need to add to your HTML file: ``` ``` In addition, if you want syntax highlighting, you should add the following files. Using it is simple, just create a `` tag with a `class="brush: js"` to highlight javascript code for example. You can read more on the [SyntaxHighlighter](http://alexgorbatchev.com/SyntaxHighlighter/) website itself. ``` ``` Finally you should initialize Slippy and the syntax highlighter: ``` $(function() { $(".slide").slippy({}); SyntaxHighlighter.all(); }); ``` Images are automatically scaled to fit onto the slide whatever the size of the browser window. You can tweak the behaviour with the baseWidth and imgScaleTrivial parameters (see below). If one of your images should never be scaled, add the class "noscale" to the ![]() tag, i.e. [![](text.png)](text.png) The slippy() call takes an option object, which accepts the following keys: - animLen, duration for default animations (0 = disabled) - animInForward, receives a slide and animates it - animInRewind, receives a slide and animates it - animOutForward, receives a slide and animates it - animOutRewind, receives a slide and animates it - baseWidth, defines the base for img resizing, if you don't want only full-width images, specify this as the pixel width of a slide so that images are scaled properly (default is 620px wide). Set to false to not scale images. - imgScaleTrivial, defines the limit beneath that images are not scaled to avoid unnecessary scaling that renders the image less nice. - ratio, defines the width/height ratio of the slides, defaults to 1.3 (620x476) - margin, the fraction of screen to use as slide margin, defaults to 0.15 How to: Show images fullscreen ------------------------------ [](#how-to-show-images-fullscreen) If a slide contains a `data-background` attribute, the referenced image will be inserted fullscreen, and the background (if the image is not of the same aspect ratio as the screen) will turn black. Example: ``` Content ``` Server ------ [](#server) The `src/` folder contains an index.php that serves slides. - Put the `src` folder inside the webroot of a web server - Copy `config.php.dist` to `config.php` and adjust to point to the folder containing your slides - or just copy/symlink all slides into the `src` folder. The `index.php` looks for html files in that folder and shows them, using the header information for title and author. Exporting self-contained HTML presentations ------------------------------------------- [](#exporting-self-contained-html-presentations) Slippy can generate a presentation in a single file, with all javascript, css and images inlined. ``` php src/index.php [] ``` If you omit the output file, slippy will generate the filename from the input file, appending \_compiled to the name. If you set up the slippy webserver (see above), you can also click the download link. Limitation: If you use images in css statements, they are not included. If you need to do that, you should generate a PDF instead (see below). Exporting PDFs -------------- [](#exporting-pdfs) To upload your presentation on SlideShare, or to share it with others, it can be convenient to export it to a PDF. Slippy comes with a CLI utility that does just that. The only requirement is that you download [PhantomJS](http://code.google.com/p/phantomjs/downloads/list) (2.0+) and [pdftk](http://www.pdflabs.com/tools/pdftk-the-pdf-toolkit/) and place the executables in the `bin/phantomjs`and `bin/pdftk` dirs or make them accessible via your `PATH` environment variable. If you're on linux you can probably install pdftk with your distro's package manager. Once that is done, you can call the script using `bin/slippy-pdf.sh `. It will take a while and then should output a 4:3 PDF file. If you don't like the aspect ratio or size, you can change the viewport size in the `bin/phantom-slippy-to-pdf.js` file. If you have rendering issues (missing images or such), try increasing the delay, or rendering again, sometimes PhantomJS just fails without apparent reason. Author ------ [](#author) Jordi Boggiano - - See also the list of [contributors](https://github.com/Seldaek/slippy/contributors) which participated in this project. Contribute ---------- [](#contribute) [![](https://camo.githubusercontent.com/9300a4e82ff4977e7d425238516355385cdd19e7259e1fead0584a5fa6c58910/687474703a2f2f6170692e666c617474722e636f6d2f627574746f6e2f627574746f6e2d7374617469632d35307836302e706e67 "Flattr this")](http://flattr.com/thing/14125/Slippy-HTML-Presentations) If you like this piece of software, please consider giving back with Flattr. Code contributions, bug reports and ideas are obviously also much welcome. Changelog --------- [](#changelog) - 1.0.0 - Switched license to BSD - Slide decks files are now standalone html files that don't need php - However it is recommended if you have code blocks since it will convert html special chars automatically - Note that this breaks compatibility with previous slide decks, since the js/css files have to be included by hand in it now - Added layout functionality, see the slide on layouts in the example deck for docs - Added parameters to the main slippy js command that enable users to easily tweak/override things, see example file - Added swipe/double-tap support on touch devices - Added PDF export functionality using PhantomJS - Splitted css in structural/theme stylesheets for easy customization - Improved the default theme for better readability on projectors - Auto-sizing to the browser dimensions - Added page up, page down support for prev/next slide, and home/end to go to the begining or end of presentaiton - Animations are going the right way now when using overview/direct input and going backwards - Added a template to render the slide repository page - Added a packager that embeds everything for easy distribution of slides as one html file - Added incremental slides functionality (use the incremental class on any elements to make them appear one by one) - Added fullscreen image support on a per-slide basis (`data-background="img url"` on a slide div) - JS Alerts are now cleared when changing slide, but stay visible longer - Fixed bug preventing "0" to be used to switch to slides - 0.9.0 - Initial Public Release License ------- [](#license) Slippy is licensed under the New BSD License, which means you can do pretty much anything you want with it - However, I encourage you to share your slides and stylesheets if you make some, but there is no obligation whatsoever. New BSD License - see the `src/LICENSE` file for details Compatibility ------------- [](#compatibility) It should work with all browsers, except for the overview function that does not work in IE8 and below. ### Health Score 32 — LowBetter than 72% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity38 Limited adoption so far Community26 Small or concentrated contributor base Maturity40 Maturing project, gaining track record Bus Factor1 Top contributor holds 89% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Community Maintainers ![](https://www.gravatar.com/avatar/b69782e1d7f426ef78f61d159c466a536372eff931f13981ac578fa3f4649352?d=identicon)[Seldaek](/maintainers/Seldaek) --- Top Contributors [![Seldaek](https://avatars.githubusercontent.com/u/183678?v=4)](https://github.com/Seldaek "Seldaek (113 commits)")[![dbu](https://avatars.githubusercontent.com/u/76576?v=4)](https://github.com/dbu "dbu (5 commits)")[![nedbat](https://avatars.githubusercontent.com/u/23789?v=4)](https://github.com/nedbat "nedbat (2 commits)")[![stof](https://avatars.githubusercontent.com/u/439401?v=4)](https://github.com/stof "stof (2 commits)")[![kageroh](https://avatars.githubusercontent.com/u/251925?v=4)](https://github.com/kageroh "kageroh (2 commits)")[![owenthereal](https://avatars.githubusercontent.com/u/169064?v=4)](https://github.com/owenthereal "owenthereal (1 commits)")[![kyleconroy](https://avatars.githubusercontent.com/u/34893?v=4)](https://github.com/kyleconroy "kyleconroy (1 commits)")[![kant](https://avatars.githubusercontent.com/u/32717?v=4)](https://github.com/kant "kant (1 commits)") ### Embed Badge ![Health badge](/badges/seld-slippy/health.svg) ``` [![Health](https://phpackages.com/badges/seld-slippy/health.svg)](https://phpackages.com/packages/seld-slippy) ``` ### Alternatives [okipa/laravel-table Generate tables from Eloquent models. 56752.8k](/packages/okipa-laravel-table)[api-clients/command-bus Light weight wrapper around league/tactician adding promised based interface(s) and next tick execution 11196.7k4](/packages/api-clients-command-bus)[cornernote/yii2-softdelete Soft delete behavior for Yii2. 2314.6k](/packages/cornernote-yii2-softdelete)[eliashaeussler/typo3-solver Extension for TYPO3 CMS to extend TYPO3's exception handling with AI generated solutions 292.1k](/packages/eliashaeussler-typo3-solver) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)