Premium Desktop +
Mobile jQuery Plugins

iosslider-vertical – Touch Enabled, Responsive jQuery Vertical Content Slider Pluginv1.0.17

iosslider-vertical is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for containing long, scrolling vertical content.

Buy Now$15USD
Download Demo

Touch Enabled, Responsive jQuery Vertical Content Slider Plugin

iosSlider Vertical is a jQuery plugin which allows you to integrate a customizable, cross-browser content slider into your web presence. Designed for containing long, scrolling vertical content.


Browser Support

iOS iPhone / iPad / iPod Touch

Browser Version
Safari 4.0+
Chrome 19.0+

Surface Multi-platform

Browser Version
Internet Explorer 10+

Desktop Windows / Mac

Browser Version
Firefox 5.0+
Chrome 19.0+
Safari 5.0+
Internet Explorer 7+

Android Multi-platform

Browser Version
Stock 2.3+
Firefox 18.0+
Chrome 19.0+
Opera 12.0+

Hardware accelerated

Using CSS3 for supported iOS, Surface, 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.

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.

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

- Jun 23, 2017

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!

- Jun 22, 2017

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.

- Jun 19, 2017

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

- Jun 15, 2017

The required CSS attributes are included to guarantee optimal performance. Feel free to apply as many other CSS attributes as you want.

- Jun 13, 2017

The jQuery library and iosslider-vertical Plugin scripts must be included in the HTML header of the web page.

- Jun 08, 2017

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

- Jun 03, 2017

Send

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.

User Ratings

5 out of 5
average rating
10
0
0
0
0
rating distribution

Browser Support Details

iOS iPhone / iPad / iPod Touch

Browser Version
Safari 4.0+
Chrome 19.0+

Surface Multi-platform

Browser Version
Internet Explorer 10+

Desktop Windows / Mac

Browser Version
Firefox 5.0+
Chrome 19.0+
Safari 5.0+
Internet Explorer 7+

Android Multi-platform

Browser Version
Stock 2.3+
Firefox 18.0+
Chrome 19.0+
Opera 12.0+

iosslider-vertical 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-vertical script. The download package contains the iosslider-vertical script, the jQuery library, demos and benchmarks.

Include the Necessary JavaScript Files

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

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

<!-- Optional mousewheel support -->
<script type = 'text/javascript' src = 'jquery.mousewheel.js'></script>

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

Add the HTML

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

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

	<!-- 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-vertical download package.

/* slider container */
.iosSliderVertical {
	/* required */
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	
	width: <slider width>px;
	height: <slider height>px;
}

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

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

	width: <slide width>px;
	height: <slide height>px;
}

Add the JavaScript

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

$(document).ready(function() {

	/* basic - default settings */
	$('.iosSliderVertical').iosSliderVertical();
	
	/* some custom settings */
	$('.iosSliderVertical').iosSliderVertical({
		snapToChildren: true,
		scrollbarHide: true,
		desktopClickDrag: true,
		scrollbarLocation: 'left',
		scrollbarWidth: '6px',
		scrollbarBackground: 'url(_img/some-img.png) repeat 0 0',
		scrollbarBorder: '1px solid #000',
		scrollbarMargin: '0 30px 16px 30px',
		scrollbarOpacity: '0.75',
		onSlideChange: someCallbackFunction
	});

});

Settings & Options

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

Basic Settings & Options

Key Value Description
elasticPullResistance 0.6 (decimal, 0.0 - 1.0) The elastic resistance when pulling on the slider edge.
frictionCoefficient 0.92 (decimal, 0.0 - 1.0) The friction coefficient applied to the momentum on touch release affecting the rate of deceleration.
elasticFrictionCoefficient 0.6 (decimal, 0.0 - 1.0) Additonal friction coefficient applied when momentum slides outside the bounds of the slider.
snapFrictionCoefficient 0.92 (decimal, 0.0 - 1.0) Friction applied to the slider when snapping to an element.
snapToChildren false (boolean) Slider will slide to the closest child element on touch release.
snapSlideCenter false (boolean) When snapToChildren is true, this option will snap the slide to the center of the draggable area.
startAtSlide 1 (integer) Current slide when slider is initially loaded.
mousewheelScroll true (boolean) Enables vertical mouse wheel scrolling. Requires jquery.mousewheel.js.
mousewheelScrollSensitivity 1 (integer) Modifies the mouse wheel scroll sensitivity. Requires jquery.mousewheel.js.
mousewheelScrollOverflow false (boolean) Enables mouse wheel browser scrolling when bottom or top of slider is reached. Requires jquery.mousewheel.js.
scrollbar true (boolean) Show or hide the scrollbar.
scrollbarDrag true (boolean) Enables click/drag, touch/drag functionality on the scrollbar. When enabled, the options scrollbar and scrollbarHide are automatically set to true and false respectively.
scrollbarHide false (boolean) Show or hide the scrollbar when it is idle.
scrollbarLocation 'right' (string, 'left' or 'right') Location that the scrollbar will appear.
scrollbarContainer '' (string) A jQuery selection (ex. $('#scrollbarContainer') ), the scrollbar will be loaded and contained by this selection. The scrollbar width will be defined by this container.
scrollbarOpacity 0.4 (decimal) The css opacity of the scrollbar when visible.
scrollbarWidth '8px' (string) The css height in 'px' of the scrollbar.
scrollbarBorder 'none' (string) The css border of the scrollbar.
scrollbarMargin '5px' (string) The css margin of the scrollbar.
scrollbarBackground 'none' (string) The css background of the scrollbar.
scrollbarBorderRadius '100px' (string) The css border-radius of the scrollbar.
scrollbarShadow 'none' (string) The css box-shadow of the scrollbar.
scrollbarElasticPullResistance 0.9 (decimal, 0.0 - 1.0) Additonal friction coefficient applied to the scrollbar when momentum/user moves slides outside the bounds of the slider.
desktopClickDrag false (boolean) Desktop click and drag fallback for the desktop slider.
keyboardControls false (boolean) Left/right keyboard arrows can be used to navigate the slider.
tabToAdvance false (boolean) Tab key can be used to navigate the slider forward.
responsiveSlideContainer true (boolean) Width of slide container becomes responsive to the width/height of its parent element. Slide container dynamically collapse to the width/height of the parent element when wider/taller.
responsiveSlides false (boolean) Width of slides becomes responsive to the width/height of its parent element. Slides dynamically collapse to the width/height of the parent element of the slider when wider/taller.
navSlideSelector null (string) A jQuery selection (ex. $('.navButtons .button') ), each element returned by the selector will activate navigation to each slide respectively. ie. element 0 when clicked (or touched) will animate to the first slide and so on.
navPrevSelector null (string) A jQuery selection (ex. $('#previousSlide') ), the element returned by the selector will navigate to the previous slide when clicked.
navNextSelector null (string) A jQuery selection (ex. $('#nextSlide') ), the element returned by the selector will navigate to the next slide when clicked.
autoSlide false (boolean) Enables automatic cycling through slides.
autoSlideTimer 5000 (integer) the time (in milliseconds) that a slide will wait before automatically navigating to the next slide.
autoSlideTransTimer 750 (integer) the time (in milliseconds) required for all automatic animations to move between slides. See navSlideSelector, navPrevSelector, navNextSelector for details on activating elements for automatic sliding.
autoSlideToggleSelector null (string) A jQuery selection (ex. $('#autoScrollToggle') ), the element returned by the selector will disable/enable automatic scrolling when clicked. Note: Only works when autoSlide is set to 'true'.
autoSlideHoverPause true (boolean) Enables pausing of the autoSlide function when the user mouses over the slider area.
infiniteSlider false (boolean) Makes the slider loop in both directions infinitely with no end. When set to true, the option scrollbar is automatically disabled.
snapVelocityThreshold 5 Minimum slide velocity threshold required to trigger slide snapping to next/previous slide.
slideStartVelocityThreshold 0 Minimum slide velocity threshold required to begin slider movement.
verticalSlideLockThreshold 0 Minimum slide velocity threshold required to lock vertical sliding in the browser.
horizontalSlideLockThreshold 3 Minimum slide velocity threshold required to lock horizontal slider movement.
stageCSS { position: 'relative', top: '0', left: '0', overflow: 'hidden', zIndex: 1 } (object) The customizable CSS of the stage object.
sliderCSS { overflow: 'hidden' } (object) The customizable CSS of the slider object.
unselectableSelector null (string) A jQuery selection (ex. $('.unselectable') ), each element returned by the selector will become removed from touch/click move events.

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.

Key Value Description
onSliderLoaded null (function) Executed when slider has finished loading initially.
onSliderUpdate null (function) Executed when public method 'update' has been completed.
onSliderResize null (function) Executed when the window has been resized or a device has been rotated.
onSlideStart null (function) Executed when the slider has begun to move.
onSlideChange null (function) Executed when the slider has entered the range of a new slide.
onSlideComplete null (function) Executed when the slider has come to a stop on a new slide.

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.

$('.iosSliderVertical').iosSliderVertical({
	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 
 */
$(element).data('iosSliderVertical', {
	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. */
$(element).data('args', {
	sliderObject,
	sliderContainerObject,
	slideChanged,
	prevSlideNumber,
	prevSliderOffset
	targetSlideObject,
	targetSlideNumber,
	currentSlideObject,
	currentSlideNumber,
	currentSliderOffset
});

Public Methods

Method Description
$(element).iosSliderVertical('prevPage'); Slides up 1 page. The length of a page is equal to the stage height (height of the outer slider element) or if snapToChildren is true, the length is equal to the closest slide offset less than the stage height.
$(element).iosSliderVertical('nextPage'); Slides down 1 page. The length of a page is equal to the stage height (height of the outer slider element) or if snapToChildren is true, the length is equal to the closest slide offset less than the stage height.
$(element).iosSliderVertical('prevSlide', slideNum); Slides to the previous slide.
$(element).iosSliderVertical('nextSlide', slideNum); Slides to the next slide.
$(element).iosSliderVertical('update'); Updates/reinitializes internal variables/CSS attributes based on changes to the HTML/CSS/JS structure of the slider.
$(element).iosSliderVertical('destroy'); Destroys the selected slider.
Optional parameter: 'clearStyle' (boolean, default: true) when iosslider-vertical is destroyed, all inline style applied to the slider will be removed.
$(element).iosSliderVertical('goToSlide', slideNum); Moves to the selected slide.
Required parameter: 'slideNumber' (integer, default: null)
$(element).iosSliderVertical('addSlide', slideHTML, slidePosition); Adds a slide defined by 'slideHTML' and placed at position 'slidePosition'.
Required parameters: 'slideHTML' (string, default: null), 'slidePosition' (integer, default: null)
$(element).iosSliderVertical('removeSlide', slideNum); Removes a slide from the slider.
Required parameter: 'slideNumber' (integer, default: null)
$(element).iosSliderVertical('lock'); Locks the slider. Temporarily disabling touch/drag events within the slider without unbinding them.
$(element).iosSliderVertical('unlock'); Unlocks the slider. Enables touch/drag events previously disabled by the lock method.
$(element).iosSliderVertical('autoSlidePlay'); Starts and enables auto-sliding on the slider.
$(element).iosSliderVertical('autoSlidePause'); Stops the slider from auto-sliding.

Licensing

Single Domain
License
Multi Domain
License
Extended Domain
License
Website Template
License
iOS/Android App
License
1
Webiste
2
Websites
Unlimited
Websites
1
Template
1
App
Customer Support Customer Support Customer Support Customer Support Customer Support
This license permits you to use iosslider-vertical within a single website application. This license permits you to use iosslider-vertical within two website applications. This license permits you to use iosslider-vertical within unlimited website applications. This license permits you to use iosslider-vertical within a single website template for sale. This license permits you to use iosslider within a single iOS/Android Application for sale.
not for resale or redistribution not for resale or redistribution not for resale or redistribution for sale, limit 1 template for sale, limit 1 app
Buy Now$15USD
Buy Now$24USD
Buy Now$80USD
Buy Now$100USD
Buy Now$100USD

Help & Support

Product Support

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

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!

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.

About

We produce premium quality desktop and mobile jQuery plugins. Our plugins support the latest responsive, touch, and hardware acceleration capabilities.

Questions/comments before implementing?
Let us know. Contact Us

Login

Enter your login information to access product downloads.

Email Address:

Password: Forgot password?

Login

Password Reset

Recovery instructions will be emailed to you.

Email Address:

 Cancel

Reset Password

Create Account

An account is required to purchase products and access downloads.

Already have an account? Login here.

First Name:

Last Name:

Email Address:

Password:

Confirm Password:

Create

Purchase License

Enter your payment details for:


iossliderSingle Domain License

$XX USD

$15 USD


Do you have a
coupon code?

Apply

Credit Card Information

Expiry Date:

/

CVC:

Purchase

Success!

Thank you for purchasing
xy License.

An order confirmation email has been sent to .


You can access your purchase through the downloads page in your account or by clicking the download button below.

Download

Update Password

Enter your new password below.

Password:

Confirm Password:

Update