1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var opts = {
	// Hide the default navigation items        
	nav: false,
    prev: false,
    next: false,
    // Define callback for onload
    onload: function(total, index) {
        // Create a nav link for each slide
        for(i=1; i<=total; i++) {
            $('#remote-nav').append('<a class="button" rel="' + i + '">' + i + '</a>');
        }
        // Set active nav item
        $('#remote-nav a:nth-of-type(' + index + ')').addClass('active');
    },
    // Create an onpostchange callback to update the active nav items
    onprechange: function(oldindex, newindex) {
        $('#remote-nav a.active').removeClass('active');
        $('#remote-nav a:nth-of-type(' + newindex + ')').addClass('active');
    }
}
// Instantiate shyft
var myshyft = shyft($('#shyft-example'), opts);

// Wire up click events for the nav elements 
// Use the change() method to change slides
$('#remote').on('click', 'a', function(e) {
    e.preventDefault();
    var p = $(e.target).closest('a').attr('rel');
    myshyft.change(p);
});