This plugin enables you to create 3D carousel easily!
$('#sample1').carousel3d();
$('#sample1').carousel3d();
# | Parameter | Default | Detail |
---|---|---|---|
1 | perspective | 500 |
Specify carousel's perspective value. The smaller value is, the more carousel looks three-dimensional. |
2 | duration | 1000 | Time of transition. |
3 | width | null* |
Carousel width. * In the default case, specified the elements width automatically. |
4 | progress | true |
The flag for displaying indicator or not. When it's true, display indicator. When it's false, not display. |
5 | controller | true |
The flag for displaying contoroller or not. When it's true, display controller. When it's false, not display. |
6 | prevText | prev | Text for prev controller. |
7 | nextText | next | Text for next controller. |
$('#sample2').carousel3d( {
perspective: 1500
});
$('#sample3').carousel3d( {
duration: 5000
});
$('#sample4').carousel3d( {
width: 800
});
$('#sample5').carousel3d( {
progress: false
});
$('#sample6').carousel3d( {
controller: false
});
$('#sample7').carousel3d( {
prevText: '前へ'
});
$('#sample7').carousel3d( {
nextText: '次へ'
});
# | name | Parameter | Detail |
---|---|---|---|
1 | next | none | Move to next list. |
2 | prev | none | Move to prev list. |
3 | move | index{Number} | Move to specified list. |
4 | refresh | options{Object} | Refresh with new options |
5 | destroy | none | Destroy 3D carousel. |
$('#sample7').carousel3d('next');
$('#sample7').carousel3d('prev');
$('#sample7').carousel3d('move', 8);
$('#sample10').carousel3d('refresh', {
perspective: 800,
duration: 100,
width: 200,
progress: false
});
$('#sample11').carousel3d('destroy');