Islider Mobile Phone Platform JS Slide assembly

Islider mobile phone platform JS sliding components, no plug-in dependencies. It can handle any element, instance, or DOM element. It has the following features: Ability to customize animations, with animations including default, rotate, flip and depth you can easily add callback functions (Onslidestart, Onslide, Onslideend, Onslidechange) We also support sliding attenuation effect, loop effect, auto slide effect, horizontal/vertical slide. Compatible with mainstream browsers, lazy people library recommended download!

How to use:

1, you need to create a good data for islider first:

var data = [{

height:475,

width:400,

Content: "Imgs/1.jpg",

},{

height:527,

width:400,

Content: "Imgs/2.jpg",

},{

height:400,

WIDTH:512,

Content: "Imgs/3.jpg",

}];

Insert the following HTML code on the page:

<div id= "Islider-wrapper" ></div>

2 to make it run, create a new Islider class, as shown in the following example:

<script type= "Text/javascript" >

var islider = new Islider ({

Dom:document.getElementById (' Islider-wrapper '),//Islider-wrapper the ID in the HTML code corresponds

Data:data

});

</script>

3 If you want to add other effects, you can follow our Demo/picture example:

<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>

4 If you want to slide the DOM element rather than the picture, you can create a new DOM data in the following format:

var data = [{

' Height ': ' 100% ',

' Width ': ' 100% ',

' Content ': ' <div>

},{

' Height ': ' 100% ',

' Width ': ' 100% ',

' Content ': ' <div>

},{

' Height ': ' 100% ',

' Width ': ' 100% ',

' Content ': ' <div>

}];

For additional configuration options, see:

Http://be-fe.github.io/iSlider/index.html

Islider Mobile Phone Platform JS Slide assembly