Creating A Cross Device Content Slider Using iSlider.js

Category: Javascript , Recommended , Slider | June 19, 2018
Views Total:279 views
Official Page:Go to website
Last Update:June 19, 2018


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