-
Performance is extremely great with hardware acceleration and little memory consumption. -
Animation can be customized with user defined functions (default, rotate, depth, flow, flip, card). -
You can easily hook to a plethora of custom events (onslidestart, onslide, onslideend, onslidechange). -
Damping effect, Infinite Looping, Autometic sliding and Vertical/Horizontal Sliding can be configured. -
Support desktop gesture which is convenient for testing. -
Support image preloader to improve user experience.
var data = [ {
height : four hundred and fourteen ,
width : three hundred ,
content : "imgs/1.jpg" ,
} , {
height : four hundred and fourteen ,
width : three hundred ,
content : "imgs/2.jpg" ,
} , {
height : four hundred and fourteen ,
width : three hundred ,
content : "imgs/3.jpg" ,
} ] ;
<div id="iSlider-wrapper"></div>
<script type="text/javascript"> var islider = new iSlider({ dom : document.getElementById('iSlider-wrapper'), data : data }); </script>
<script type="text/javascript"> var islider = new iSlider({ data: list, dom: document.getElementById("iSlider-wrapper"), isVertical: true, isLooping: false, isDebug: true, isAutoplay: false, animateType: 'rotate' }); </script>
var data = [ {
'height' : '100%' ,
'width' : '100%' ,
'content' : '<div><h1>Home</h1><h2>This is home page</h2><p>home is pretty awsome</p><div>'
} , {
'height' : '100%' ,
'width' : '100%' ,
'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
} , {
'height' : '100%' ,
'width' : '100%' ,
'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
} ] ;
<script type="text/javascript"> var islider = new iSlider({ dom : document.getElementById('iSlider-wrapper'), data : data, duration: 2000, isVertical: true, isLooping: true, isDebug: true, isAutoplay: true }); </script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|