article:
Typography: Raphael Icon-Set via @font-face
article:
Elements Design & Mockup: One Page Resume Template

JS Plugin: iosSlider - Touch Enabled jQuery Horizontal Slider

Advertisement

"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, Android and WebKit browsers.
- Responsive support to work with the most dynamic desktop and mobile sites.
- Tons of API callbacks to get the perfect slider feel for your web application.
- FF/Safari/Chrome/IE7+ Full modern browser support for desktop.
- Infinitely looping Loop through your slides endlessly in both directions.
- Auto-sliding Set your slider to automatically transition and pause on hover.



Samples

- JavaScript files:
<!-- jQuery library -->
<script type = 'text/javascript' src = '/iosSlider/jquery-1.6.1.min.js'></script>
<!-- iosSlider plugin -->
<script type = 'text/javascript' src = '/iosSlider/jquery.iosslider.js'></script>

- HTML:

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

- code CSS:

/* slider container */
.iosSlider {
    /* required */
    position: relative;
    top: 0;
    left: 0;
    overflow: hidden;
    /* optional */
    width: 630px;
    height: 214px;
}
/* slider */
.iosSlider .slider {
    /* required */
    width: 100%;
    height: 100%;
}
/* slide */
.iosSlider .slider .slide {
    /* required */
    float: left;
    /* optional */
    width: 630px;
    height: 214px;
}

- code javascript:

$(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
    });
});



source
download

Advertisement
Tags: slider, plugin, javascript, jquery, html5, responsive, develop, mobile

Leave a Comment

No Comment

© Creative3x Ltd.