Removing slides

Custom UI

The following example uses callbacks and public methods to build a slide tray.

Click any image in the slide tray to add it to the carousel. Click any slide in the carousel to remove it and place it back in the slide tray.

Slide tray

Code for this example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// Instantiate shyft with an onremove callback
var opts = {
    // When a slide is removed, add it back to the tray
    onremove: function(slide) {
        $('#slide-tray').append(slide);
    }
}
var myshyft = shyft($('#shyft-example'), opts);

// Wire up the carousel so clicking on slides removes them
$('#shyft-example').on('click', '.shyft-item a', function(e) {
    myshyft.remove();
});

// Wire up click events to add the items from the tray to the carousel
$('#slide-tray').on('click', 'a', function(e) {
    var item = $(e.target).closest('a');
    myshyft.add(item);
});