Click here to Skip to main content
13,150,178 members (60,704 online)
Click here to Skip to main content
Add your own
alternative version

Stats

5.5K views
2 bookmarked
Posted 8 Nov 2014
MIT

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

, 8 Nov 2014
Rate this:
Please Sign up or sign in to vote.
Introduce a Stunning Performance Mobile First Slider

Demo

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:

OptionValueDescription
domHTML ObjectThe DOM element that wraps image list
dataArray of Content(picture | html)Picture data, for example:
[{
    height: 377,
    width: 600,
    content:"pics/1.jpg"
}]
typeString (pic | dom)Default value is 'pic', 'dom' is also supported
durationInteger (1000 == 1s)Time gap when an image slides. Applied only to isAutoplay is true
animateTypeStringCurrently, default, rotate, flip and depth are supported animations
onslideFunctionCallback function when your finger is moving
onslidestartFunctionCallback function when your finger touch the screen
onslideendFunctionCallback function when your finger move out of the screen
onslidechangeFunctionCallback function when the autoplay mode is on and one image slides
isDebugBoolean (true | false)Turn on/off the debug mode. Some debug message will output.
isLoopingBoolean (true | false)Turn on/off infinite looping mode
isAutoplayBoolean (true | false)Turn of/off autoplay mode
isVerticalBoolean (true | false)Slide vertically or horizontally

License

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

Share

About the Author

Chengxi Li
Hong Kong Hong Kong
No Biography provided

You may also be interested in...

Pro
Pro

Comments and Discussions

 
-- There are no messages in this forum --
Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.170924.2 | Last Updated 8 Nov 2014
Article Copyright 2014 by Chengxi Li
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid