Creating A Cross Device Content Slider Using iSlider.js

Category: Javascript , Recommended , Slider | June 19, 2018
Author: BE-FE
Views Total: 249 views
Official Page: Go to website
Last Update: June 19, 2018
License: MIT


Creating A Cross Device Content Slider Using iSlider.js


iSlider.js is a simple standalone JS library to create a flexible &  fully-functional content slider/carousel for your website & app.


  • Supports any DOM elements.
  • Infinite loop.
  • Auto rotation on page loads.
  • 4 built-in animations: rotate, 3d, default, and depth.
  • Custom animation types.
  • Callback functions.
  • Mobile compatible and touch-enabled.
  • Vertical & horizontal sliding.

Basic usage:

Load the iSlider.js library’s files at the end of the document so the pages load faster.

<script src="build/islider.min.js"></script>
<script src="build/iSlider.animate.min.js"></script>

Load a plugin of your choice for the iSlider.js library.

<!-- Boundary plugin -->
<script src="build/iSlider.plugin.BIZone.js"></script>

<!-- Navigation plugin -->
<script src="build/iSlider.plugin.button.js"></script>

<!-- Pagination plugin -->
<script src="build/"></script>

<!-- Image zoom plugin -->
<script src="build/iSlider.plugin.zoompic.jss"></script>

Create an empty element that will be served as the slider container.

<div id="demo"></div>

Add your slider content using JS array object.

var myData = [
    {content: "1.jpg"},
    {content: "2.jpg"},
    {content: "3.jpg"},
    // ... more data here

Initialize the slider with options.

var mySlider = new iSlider({
    data: myData,
    dom: document.getElementById("demo")

All the available options and callbacks to customize the library.

// The DOM element that wraps image list
dom: null,

// An array of contents
data: [],

// default, rotate, depth, flow, flip, card, fade, zoomout
animateType: 'pic',

// animation duration
animateTime: 1000,

// linear, ease, ease-in, ease-out, ease-in-out, cubic-bezier
animateEasing: 'ease'

// interval
duration: 1000,

// default, rotate, flip, depth
animateType: 'default',

// auto disable autoplay
wakeupAutoplayDazetime: true,

// Callbacks
onslide: null,
onslidestart: null,
onslideend: null,
onslidechange: null,

// Debug mode
isDebug: false,

// Infinite loop
isLooping: true,

// damping coefficient
dampingForce: 0

// Auto rotation on page loads
isAutoplay: true,

// vertical or horizontal
isVertical: true,

// background tile
isOverspread: false,

// enable touch events
isTouchable: true,

// initial slide
initIndex: 0,

// interaction scope
// 10px
fingerRecognitionRange: 10,

// Boolean|Array|String
fixPage: true,

// show space between slides
fillSeam: false,

// plugins to activate
plugins: {}


v2.2.4 (06/19/2018)

  • Bugfix

You Might Be Interested In:

Leave a Reply