BESPOKE – DIY Presentation Micro-Framework.

Bespoke is a wonderful plugin which will give the opportunity to present your content in a very appealing way.  It is less than 1KB minified and gzipped, with no dependencies.

Bespoke.js provides the foundation, then gets out of your way so you can focus on uniquely crafting your own personal deck style.

Using keyboard and touch events, Bespoke.js adds classes to your slides, while you provide the CSS transitions. With its robust plugin system, new functionality can be added to Bespoke.js easily.








Getting Started

To create a Bespoke.js presentation, follow these 3 simple steps:

Need more functionality? Use an existing plugin, or create a new one.

Basic Usage


The tags you use are completely optional. Once a parent element is selected, the child elements become slides.

<link rel="stylesheet" href="path/to/my/theme.css">

  <section>Slide 1</section>
  <section>Slide 2</section>
  <section>Slide 3</section>

<script src="bespoke.min.js"></script>
<script src="path/to/my/script.js"></script>


Decks are created by selecting the parent element with the from(selector) method, with optional ‘horizontal’ or ‘vertical’ event handlers.

Horizontal Deck

Uses space bar, horizontal arrows and swipes for navigation.

Vertical Deck

Uses space bar, vertical arrows and swipes for navigation.

Minimal Deck

For the absolute purist only. Minimal decks provide a simple control API with zero default event handlers. Key presses and swipes have no effect, it’s up to you to implement your own interactions from scratch.



The following plugins are available for Bespoke.js.

Official Plugins

All official plugins can be installed from Bower, e.g. $ bower install bespoke-bullets

Third-Party Plugins


Advanced Usage

Control API

Programmatically control your presentation, or implement a custom interface when using a minimal deck.

// Next slide;

// Previous slide

// Go to a specific slide


Binding Events

Each event is passed an event object containing a reference to the relevant slide and its index.

bespoke.on(eventName, function(event) {
  event.slide; // Relevant slide
  event.index; // Index of relevant slide

  // Prevent default functionality (for user interaction events only)
  return false;

If you need more detail about the deck in your event handlers, you may need to retain a reference to the individual deck instance.

Related post:  jQuery simpleGallery - Fullscreen and responsive lightbox
Standard Events

In most cases, you will only need to use these standard events.

activate A slide has been activated. event.slide is the activated slide.
deactivate A slide has been deactivated. event.slide is the deactivated slide.
User Interaction Events

These events are fired when the user has interacted with the presentation, but before their interaction has had any effect.

This allows you to intercept the default behaviour by returning false from the event handler.

next The next slide has been requested, even if last slide is active. event.slide is the current slide.
prev The previous slide has been requested, even if first slide is active. event.slide is the current slide.
slide A specific slide has been requested. event.slide is the requested slide.
Unbinding events

Events handlers can be removed with the off(event, callback) method.

Note: To remove an event handler, you must retain a reference to the original function.

var myEventHandler = function() {
  // Do something...

// Bind event
bespoke.on('activate', myEventHandler);

// Unbind event'activate', myEventHandler);

Deck Instances

Creating Deck Instances

Individual deck instances can be created and controlled separately.

// First deck instance
var one = bespoke.horizontal.from('#deck-one');;

// Second deck instance
var two = bespoke.horizontal.from('#deck-two');;

The global bespoke API interacts with all deck instances. For example, calling is actually calling next() on all decks.

Deck Instance Properties

The following properties are available on each instance.

Note: The optional eventData parameter is an object that will be merged with the event object in subsequent event handlers.

next([eventData]) Next slide.
prev([eventData]) Previous slide.
slide(index[, eventData]) Activate a specific slide by index.
on(event, callback) Attach event handlers
off(event, callback) Remove event handlers
fire(event[, eventData]) Fire custom events. This method is primarily designed for plugin authors.
parent The deck’s parent element
slides An array of slide elements
Related post:  4 Free Ebooks from Packt Publishing – HTML/CSS/JavaScript/Hadoop

Creating Plugins

If you need to expand upon the core Bespoke.js feature set, additional functionality can be packaged up as plugins.

If you’d like to learn by example, check out the list of existing plugins.

Basic Plugins

Plugins are simply functions that are called when presentations are created.

They are passed a deck instance which allows you to interact with the deck’s state, bind events and modify its elements.

// Creating the plugin
bespoke.plugins.myPlugin = function(deck) {
  deck.on('activate', function(e) {
    console.log('Activated slide ' + (e.index + 1) + ' of ' + deck.slides.length);

The plugin can now be provided to the second parameter of the from(selector[, plugins]) method.

// Using the plugin
bespoke.horizontal.from('article', { myPlugin: true });

Note: If the value provided is false instead of true, your plugin won’t run.

Plugins with Options

If your plugin needs some configurability, options can be passed through as the second parameter.

Note: The ‘options’ parameter is an empty object if no options are provided.

// Creating the plugin with options
bespoke.plugins.myPlugin = function(deck, options) {
  options.showTotal = options.showTotal !== undefined ? options.showTotal || true;

  deck.on('activate', function(e) {
    console.log('Activated slide ' + (e.index + 1) +
      (options.showTotal ? ' of ' + deck.slides.length : ''));

// Using the plugin with options
bespoke.from('article', {
  myPlugin: {
    showTotal: true

Custom Event Data

Additional event data can be supplied to nextprev and slide, which is merged with the final event object in subsequent event handlers.

This functionality is particularly useful if you need to differentiate between events caused by your plugin, and those caused by your end users or other plugins.

bespoke.plugins.myPlugin = function(deck) {

  // Differentiating our plugin's events
  deck.on('activate', function(event) {
    if ( === 'bar') {
      // Triggered by my plugin...
    } else {
      // Triggered by end user, or another plugin...

  // Providing custom event data{
    foo: 'bar'



Divi WordPress Theme

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.