Smooth mobile touch slider for Mobile WebApp, HTML5 App, Hybrid App
JavaScript CSS
Pull request Compare This branch is 554 commits behind be-fe:master.
Latest commit 3099400 Dec 25, 2014 @xieyu33333 xieyu33333 Merge pull request #126 from xieyu33333/master
add AMD to the code
Permalink
Failed to load latest commit information.
build update build Dec 25, 2014
demo update build Dec 25, 2014
src update build Dec 25, 2014
.gitignore change _slide to slideTo && fix cssText bug Nov 13, 2014
LICENSE change pictures Oct 31, 2014
README.md 完善注释&修改readme Dec 2, 2014
README_Chinese.md 完善注释&修改readme Dec 2, 2014
gulpfile.js update build Dec 25, 2014
package.json update build Dec 25, 2014
qrcode.png improve demo Nov 5, 2014

README.md

iSlider,Smooth slider for webapps

iSlider English Official Page

iSlider 中文官网

iSlider 中文README

iSlider Example

iSlider is a high performance,dependency free, mobile-platform javascript slider. It can handle any elements that need to be slide, like picture list or different dom elements. It features:

  • Performance is extremely great with hardware acceleration and little memory consumption.
  • Animation can be customized with user defined functions (default, rotate, depth, flow, flip, card).
  • You can easily hook to a plethora of custom events (onslidestart, onslide, onslideend, onslidechange).
  • Damping effect, Infinite Looping, Autometic sliding and Vertical/Horizontal Sliding can be configured.
  • Support desktop gesture which is convenient for testing.
  • Support image preloader to improve user experience.

iSlider Mobile Demo

Getting Started

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: 414,
    width: 300,
    content: "imgs/1.jpg",
},{
    height: 414,
    width: 300,
    content: "imgs/2.jpg",
},{
    height: 414,
    width: 300,
    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 prefers 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 awsome</p><div>'
},{
    'height' : '100%',
    'width' : '100%',
    'content' : '<div><h1>Page1</h1><h2>This is page1</h2><p>page1 is pretty awsome</p><div>'
},{
    'height' : '100%',
    'width' : '100%',
    'content' : '<div><h1>Page2</h1><h2>This is Page2</h2><p>Page2 is pretty awsome</p><div>'
}];

If you hope to implement the effects mentioned in 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 provides 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, flow, depth, flip and card 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 | fasle) Slide verically or horizontally
isOverspread Boolean (true | fasle) Decide whether to cover the whole browser screen or not

License (MIT)

Copyright (c) 2014 BE-FE

MIT