iosslider – Touch Enabled, Responsive jQuery Horizontal Content Slider/Carousel/Image Gallery Plugin

iosslider is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for use as a content slider, carousel, scrolling website banner, or image gallery.

Features

• Hardware accelerated - Using CSS3 for supported iOS, Surface, Android and WebKit browsers.
• Responsive support - To work with the most dynamic desktop and mobile sites.
• Non-intrusive JavaScript - Respects your code first. No unnecessary CSS attribute overrides or event bindings.
• Tons of API callbacks - To get the perfect slider feel for your web application.
• FF/Safari/Chrome/IE7+ - Full modern browser support for desktop.
• iOS/Surface/Android - Support for a wide range of mobile operating systems and platforms.
• Infinitely looping - Loop through your slides endlessly in both directions.
• Auto-sliding - Set your slider to automatically transition and pause on hover.
• Custom scrollbars - Over a dozen settings to control placement, look and feel, and user interaction.
• Slide Navigation - Built-in support for slide indicators and next/previous buttons.
• Robust demo package - Download package includes working examples of all features.
• First class service - Your license includes premium customer service from experienced plugin developers.

Browser Support Details

iOS - iPhone / iPad / iPod Touch

Surface - Multi-platform

Desktop - Windows / Mac

Android - Multi-platform

iosslider may work in earlier versions of browsers listed, but are not supported at this time.

Installation & Setup

Getting Ready

To get started, you will need to download the iosslider script. The download package contains the iosslider script, the jQuery library, demos and benchmarks.

Include the Necessary JavaScript Files

The jQuery library and iosslider Plugin scripts must be included in the HTML header of the web page. The jQuery library must be included first for the iosslider plugin to function.

<!-- jQuery library -->
<script type = 'text/javascript' src = 'jquery-1.4.min.js'></script>

<!-- iosslider plugin -->
<script type = 'text/javascript' src = 'jquery.iosslider.js'></script>

Add the HTML

Add the iosslider HTML code within the body of the web page. The HTML can contain as little as one slide element.

<div class = 'iosslider'>

    <!-- slider -->
    <div class = 'slider'>

        <!-- slides -->
        <div class = 'slide'>...</div>
        <div class = 'slide'>...</div>
        <div class = 'slide'>...</div>

    </div>

</div>

Add the CSS

Place the CSS in your stylesheet. The required CSS attributes are included to guarantee optimal performance. Feel free to apply as many other CSS attributes as you want. To see some real-world examples of this, check the demos folder of the iosslider download package.

/* slider container */
.iosSlider {
    /* required */
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;

    width: px;
    height: px;
}

/* slider */
.iosSlider .slider {
    /* required */
    width: 100%;
    height: 100%;
}

/* slide */
.iosSlider .slider .slide {
    /* required */
    float: left;

    width: px;
    height: px;
}

Add the JavaScript

Add the code below to your JavaScript file. The following code uses the jQuery selector to initialize the iosslider jQuery plugin. If you are unfamiliar with jQuery, here is a tutorial to get you started.

$(document).ready(function() {

    /* basic - default settings */
    $('.iosSlider').iosSlider();

    /* some custom settings */
    $('.iosSlider').iosSlider({
        snapToChildren: true,
        scrollbar: true,
        scrollbarHide: false,
        desktopClickDrag: true,
        scrollbarLocation: 'bottom',
        scrollbarHeight: '6px',
        scrollbarBackground: 'url(_img/some-img.png) repeat 0 0',
        scrollbarBorder: '1px solid #000',
        scrollbarMargin: '0 30px 16px 30px',
        scrollbarOpacity: '0.75',
        onSlideChange: changeSlideIdentifier
    });

});

Settings & Options

You can pass along any of the following key/value pairs listed below to the iosSlider() function or modify them within the iosslider JavaScript file directly.

Basic Settings & Options

Advanced Settings & Options

Advanced callbacks allow further customization through end user created functions/hooks. For additional information regarding parameters supplied to these callbacks, see parameter object details directly below the following table.

Callback Parameter Object Details

All callback functions listed above return the same object, for our example, we will call this object 'args'.

args = {
    settings: {
        /* all basic/advanced settings & options from above */
    },
    data: {
        obj,
        settings,
        scrollerNode,
        numberOfSlides,
        sliderNumber,
        childrenOffsets,
        sliderMax,
        scrollbarClass,
        scrollbarWidth, 
        scrollbarStageWidth,
        stageWidth, 
        scrollMargin, 
        scrollBorder, 
        infiniteSliderOffset, 
        infiniteSliderWidth
    },
    sliderObject,
    sliderContainerObject,
    targetSlideObject,
    targetSlideNumber,
    currentSlideObject,
    currentSlideNumber,
    currentSliderOffset
}

Accessing callback parameter data following the above object structure.

$('.iosSlider').iosSlider({
    onSlideChange: someCallback
});

function someCallback(args) {

    /* accessing user defined settings from initialization */
    var autoSlideToggleSelector = args.settings.autoSlideToggleSelector;

    /* accessing data from the slider object */
    var sliderMax = args.data.sliderMax;

    /* additional calculated variables supplied to the 'args' object */
    var currentSlideNumber = args.currentSlideNumber;

}

jQuery .data() Object Details

Additional public information is stored using the jQuery.data() object. For usage and access instructions, please consult the jQuery.data() object reference.

/* General variables. These variables are set during initialization,
 * window resize, orientation change, and via the 'update' public method 
 */
$('.iosSlider').data('iosslider', {
    obj,
    settings,
    scrollerNode,
    numberOfSlides,
    sliderNumber,
    childrenOffsets,
    sliderMax,
    scrollbarClass,
    scrollbarWidth, 
    scrollbarStageWidth,
    stageWidth, 
    scrollMargin, 
    scrollBorder, 
    infiniteSliderOffset, 
    infiniteSliderWidth
});

/* Dynamic variables. These variables are updated with every user interaction. */
$('.iosSlider').data('args', {
    sliderObject,
    sliderContainerObject,
    slideChanged,
    prevSlideNumber,
    prevSliderOffset
    targetSlideObject,
    targetSlideNumber,
    currentSlideObject,
    currentSlideNumber,
    currentSliderOffset
});

Public Methods

Licensing

Licensing options can be found at http://iosscripts.com/iosslider/#licensing

Help & Support

Product Support

Need help setting up one of our plugins? Drop us a line and we'll do our best to help.

Access support

Feature Request

If you have an idea for a new feature or if our plugins are missing something your application needs, tell us about it and we'll consider adding it!

Submit request

Report a Bug

If you think you might have found a bug in one of our plugins, let us know. We'll take a look under the hood and see if we can fix it.

Submit a bug