Usage

Defaults

$('#default').microfiche();

Options

$('#cyclic').microfiche({ cyclic: true });

$('#buttons').microfiche({ buttons: false });

$('#bullets').microfiche({ bullets: false });

$('#keyboard').microfiche({ keyboard: true });

$('#click').microfiche({ clickToAdvance: true });

Commands

Commands are passed to the microfiche method as options, and may be passed at any point.
In this example, the slideByPages(1) command is performed immediately after Microfiche has finished setting up.

$('#commands').microfiche({ slideByPages: 1 });

$('#commands').microfiche({ slideByPages: -1 })
$('#commands').microfiche({ slideByPages: 1 })
$('#commands').microfiche({ slideToPoint: 0 })
$('#commands').microfiche({ jumpToPoint: 0 })
$('#commands').microfiche({ jumpToPage: 2 })

Events

Microfiche emits the following events:

You can listen for them in the usual way:

$('#events').microfiche().on('microfiche:willMove microfiche:didMove', function(event) {
$('#events-console').html(event.type);
});

Event received: -

Talking to Microfiche Directly

Microfiche has some useful methods that return values, and so cannot be used through the aforementioned jQuery style syntax. The microfiche object itself is available via jQuery’ data method.

$('.my-element').data('microfiche');

Methods

var m = $('#methods').microfiche().data('microfiche');
m.currentPageIndex() // returns 0-index of the current page
m.totalPageCount() // returns the number of pages as an integer
m.min() // returns the minimum (left-most) position
m.max() // returns the maximum (right-most) position

Autoplay

To have Microfiche pause rotation when the user hovers over the carousel, set autopause to true.

$('#autoplay').microfiche({
cyclic: true,
autoplay: 3,
autopause: true
});

Refresh

To refresh an existing Microfiche’s controls and content to adjust to a new container size, call the refresh method.

$('#refresher').microfiche({ cyclic: true });

$('#refresher').css('width', '340px');
$('#refresher').microfiche({ refresh: true });

RefreshOnResize

To have Microfiche automatically refresh when a window resize event is fired, set a debounce rate in ms for refreshOnResize. A value of true indicates a 250ms debounce.

var r = $('#refreshonresize');
r.microfiche({ refreshOnResize: false });   // no refresh (default) 
r.microfiche({ refreshOnResize: true });    // 250ms debounce
r.microfiche({ refreshOnResize: 0 });       // instant refresh 
r.microfiche({ refreshOnResize: 100 });     // 100ms debounce

Resize your browser window until it's narrower than the example carousel below to see the carousel refresh.

$('#refreshonresize').microfiche({ refreshOnResize: true });