Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML5

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

5.00/5 (2 votes)
8 Nov 2014MIT3 min read 12.9K  
Introduce a Stunning Performance Mobile First Slider

Demo

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:

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

HTML
<div id="iSlider-wrapper"></div>

To make it runnable, all you need to do is to initiate:

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

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

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

JavaScript
<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:
CSS
[{
    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

License

This article, along with any associated source code and files, is licensed under The MIT License