Simple jQuery plugin for presenting a basic vertical slideshow. The slideshow can be controlled with up / down arrow keys or page up / down keys. Check out the demo.
You'll want to grab these files:
- presenter.min.js
- styles/presenter.css
- images/keyboard-image.png
Add the presenter.css stylesheet to your <head>
<link rel="stylesheet" media="screen" href="styles/presenter.css">If you require the keyboard hint image, place it in your images folder. If you'd like to customize the location, you can pass a string with the file location as an option. See usage for more info.
Include jQuery 1.7+ and then presenter.min.js at the bottom of your document.
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="presenter.min.js"></script>Provides styling for the slides, really basic responsive styles and styles for the keyboard hint. You can replace keyboard-image.png with whatever you like or disable the feature altogether. See usage for more info.
The most basic usage is calling presenter like so:
$(function() {
$('body').presenter()
})You can customize several options. These are the defaults:
$(function() {
$('body').presenter({
selector: '.slide', // The container element for your slides
contentSelector: '.slide-content', // The element wrapping your content
showHint: true, // Whether or not to show the keyboard image hint
hintSource: 'images/keyboard-image.png' // The location of the hint image
})
})Presenter.js will trigger an event presenter.active on whatever slide came into view. Additionally, presenter.js will add a class
to each slide which starts with “slide-” and followed by the slide's position like so: slide-1, slide-2 and so on.
So together you can do something like this:
$(function() {
$('body').presenter()
$('.slide-1').on('presenter.active', function() {
console.log('Hello!')
})
})Distributed under MIT License
Note This project makes use of resizeend written by Dominik Porada which is also distributed under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent