iSlider, Stunning Performance Slider Which Solves Your Pain In Mobile Development

• 
• Download source - 891 KB

Related Links

• Github Page: https://github.com/BE-FE/iSlider (It includes English README)
• Official Page: http://be-fe.github.io/iSlider/index_en.html

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:

[{
    height: 377,
    width: 600,
    content:"pics/1.jpg"
}]