Related Links
Content
Slider seems to be a very common component in most of the websites. Famous solutions are projects like iScroll, Swiper.
At the very first sight, I thought that there was no need to make similar components which is a waste of time. Until one day, I saw iSlider. I bet that could be the smoothest slider component in the market. To my surprise, in such a light-weight framework, it offers rich animation type for developers to choose. I felt that this must be a meaningful project so I decided to join and found the secrets and weapons why it had the potential to outperform its counterparts like iScroll and Swiper.
It features:
- The key to its great performance is that iSlider only maintains 3 "li" to keep the memory as small as possible. So you would never meet laggy problem in iSlider.
- It is a light-weight framework. Around 2KB after compression.
- It supports both picture and dom which are two common webapp elements.
- It offers several animation types and you can certainly customize it by yourself.
- Callback functions like onslidestart, onslideend and so on.
- Dampening effect, vertical sliding and auto sliding are supported.
Currently, it has stable releases but it is still a fast growing project. Sooner or later, more features are added into the component. No matter what features will be added, we will keep in mind that best performance is our goal.
I will let you know some future development direction and they will happen within one or two weeks.
- Image Loader
- Zoom In and Zoom Out
- Tab Switch Menu
Actually, this is not just a recommendation post, it is a recruitment post. I sincerely hope that you can join this fast growing project and make the miracle.
Using the Code
The best way to learn the iSlider is by looking at the demos. In the archive, you'll find a demo folder. Most of the script features are outlined there. iSlider
is a class that needs to be initiated for each dom area.
Before you start, you need to prepare some data for iSlider
:
var data = [{
height: 300,
width: 414,
content: "imgs/1.jpg",
},{
height: 300,
width: 414,
content: "imgs/2.jpg",
},{
height: 300,
width: 414,
content: "imgs/3.jpg",
}];
HTML structure you only need to prepare is:
<div id="iSlider-wrapper"></div>
To make it runnable, all you need to do is to initiate:
<script type="text/javascript">
var islider = new iSlider({
dom : document.getElementById('iSlider-wrapper'),
data : data
});
</script>
If you want to add more effects or options, you can follow the demo in demo/picture:
<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>
That's it.
Configure the iSlider
Besides the basic ways you can do with iSlider, you can customized the features we provide. For example, if you prefer to put dom elements on the list, you can change the data array like this:
var data = [{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Home</h1>
<h2>This is home page</h2><p>home is pretty awesome</p><div>'
},{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Page1</h1>
<h2>This is page1</h2><p>page1 is pretty awesome</p><div>'
},{
'height' : '100%',
'width' : '100%',
'content' : '<div><h1>Page2</h1>
<h2>This is Page2</h2><p>Page2 is pretty awesome</p><div>'
}];
If you hope to implement the effects mentioned in the introduction part, you can:
<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>
Understand the iSlider
Here, I provide a clear description of what options you are able to manipulate:
Option | Value | Description |
dom | HTML Object | The DOM element that wraps image list |
data | Array of Content(picture | html) | Picture data, for example:
[{
height: 377,
width: 600,
content:"pics/1.jpg"
}]
|
type | String (pic | dom) | Default value is 'pic', 'dom' is also supported |
duration | Integer (1000 == 1s) | Time gap when an image slides. Applied only to isAutoplay is true |
animateType | String | Currently, default, rotate, flip and depth are supported animations |
onslide | Function | Callback function when your finger is moving |
onslidestart | Function | Callback function when your finger touch the screen |
onslideend | Function | Callback function when your finger move out of the screen |
onslidechange | Function | Callback function when the autoplay mode is on and one image slides |
isDebug | Boolean (true | false ) | Turn on/off the debug mode. Some debug message will output. |
isLooping | Boolean (true | false ) | Turn on/off infinite looping mode |
isAutoplay | Boolean (true | false ) | Turn of/off autoplay mode |
isVertical | Boolean (true | false ) | Slide vertically or horizontally |