Creating A Cross Device Content Slider Using iSlider.js

Preview:

Description:

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

Features:

• 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/iSlider.plugin.dot.js"></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: {}

Changelog:

v2.2.4 (06/19/2018)

• Bugfix