Touch Enabled & Responsive Vertical Slider Plugin For jQuery - iosSlider Vertical

iosSlider Vertical is a responsive, mobile friendly and robust jQuery plugin for creating a mobile app-style vertical content slider with smooth scrolling effects, based on jQuery iosSlider plugin. The plugin comes with a mass of options & callbacks to customize your sliders and supports infinite looping, auto sliding, pause on hover, swipe / mouse drag navigation, custom scrollbar, and many more. Great for creating news ticker, live chat and other web components that have the ability to scroll html contents vertically.

More examples:

• Basic Custom HTML Slide
• Basic Multiple Slides
• Advanced Usage

How to use it:

1. Load the jQuery javascript library and jQuery iosSlider vertical plugin in the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src = "../_lib/jquery.mousewheel.js"></script>

2. Load the jQuery mousesheel library for mouse wheel support.

<script src = "_lib/jquery.mousewheel.js"></script>

3. Create an vertical content slider with custom scrollbar and mousewheel support.

<div class="iosslider-vertical">
<div class="slider">

<div class="item first"> <img class="left" src="1.jpg" />
<div class="copy">
<h4>Title 1</h4>
<p>Description 1.</p>
</div>
</div>

<div class="item"> <img class="left" src="2.jpg" />
<div class="copy">
<h4>Title 2</h4>
<p>Description 2.</p>
</div>
</div>

...

<div class="item"> <img class="left" src="x.jpg" />
<div class="copy">
<h4>Title x</h4>
<p>Description x.</p>
</div>
</div>

</div>
<div class="scrollbar"></div>
<div class="prev" onclick="$(".iosslider-vertical").iosSliderVertical("prevPage");"></div>
<div class="next" onclick="$(".iosslider-vertical").iosSliderVertical("nextPage");"></div>
</div>

4. The sample CSS to style the content slider.

<style type="text/css">
.iosslider-vertical {
position: relative;
top: 0;
left: 0;
overflow: hidden;
width: 400px;
height: 600px;
background: #eee;
}
.iosslider-vertical .slider {
width: 100%;
height: 100%;
}
.iosslider-vertical .slider .item {
float: left;
padding: 10px 30px 10px 10px;
border-bottom: 1px solid #ddd;
}
.iosslider-vertical .slider .item.first {
}
.iosslider-vertical .slider .item.last {
border-bottom: 0;
}
.iosslider-vertical .slider .item .copy {
margin-left: 115px;
}
.iosslider-vertical .slider .item img {
float: left;
width: 100px;
}
.iosslider-vertical .slider .item h4 {
margin: -2px 0 0 0;
font-size: 90%;
}
.iosslider-vertical .slider .item p {
margin: 5px 0 0 0;
font-size: 85%;
}
.iosslider-vertical .scrollbar {
width: 12px;
background: #aaa;
position: absolute;
top: 0;
bottom: 26px;
right: 0;
}
.iosslider-vertical .prev {
width: 12px;
height: 12px;
background: #666 url(_resources/paging.png) no-repeat 0 0;
position: absolute;
bottom: 13px;
right: 0;
cursor: pointer;
}
.iosslider-vertical .next {
width: 12px;
height: 12px;
background: #666 url(_resources/paging.png) no-repeat 0 -12px;
position: absolute;
bottom: 0;
right: 0;
cursor: pointer;
}
.iosslider-vertical .prev:hover,  .iosslider-vertical .next:hover {
background-color: #505050;
}
</style>

5. Call the plugin with customization options.

<script type="text/javascript">
$(document).ready(function() {

$('.iosslider-vertical').iosSliderVertical({
scrollbarMargin: 0,
scrollbarWidth: 12,
scrollbarBorderRadius: 0,
scrollbarContainer: '.scrollbar',
snapToChildren: true,
infiniteSlider: true,
desktopClickDrag: true
});

});
</script>

6. All the options and API callbacks.

<script type="text/javascript">
$(document).ready(function() {

$('.iosslider-vertical').iosSliderVertical({
'elasticPullResistance" : 0.6, 
"frictionCoefficient" : 0.92,
"elasticFrictionCoefficient" : 0.6,
"snapFrictionCoefficient" : 0.92,
"snapToChildren" : false,
"snapSlideCenter" : false,
"startAtSlide" : 1,
"mousewheelScroll" : true,
"mousewheelScrollSensitivity" : 1,
"mousewheelScrollOverflow" : false,
"scrollbar" : false,
"scrollbarDrag" : true,
"scrollbarHide" : false,
"scrollbarLocation" : 'right',
"scrollbarContainer" : '',
"scrollbarOpacity" : 0.4,
"scrollbarWidth" : '8px',
"scrollbarBorder" : '0',
"scrollbarMargin" : '5px',
"scrollbarBackground" : '#000',
"scrollbarBorderRadius" : '100px',
"scrollbarShadow" : '0 0 0 #000',
"scrollbarElasticPullResistance" : 0.9,
"desktopClickDrag" : false,
"keyboardControls" : false,
"tabToAdvance" : false,
"responsiveSlideContainer" : true,
"responsiveSlides" : false,
"navSlideSelector" : '',
"navPrevSelector" : '',
"navNextSelector" : '',
"autoSlideToggleSelector" : '',
"autoSlide" : false,
"autoSlideTimer" : 5000,
"autoSlideTransTimer" : 750,
"autoSlideHoverPause" : true,
"infiniteSlider" : false,
"snapVelocityThreshold" : 5,
"slideStartVelocityThreshold" : 0,
"verticalSlideLockThreshold" : 0,
"horizontalSlideLockThreshold" : 3,
"stageCSS" : {
position: 'relative',
top: '0',
left: '0',
overflow: 'hidden',
zIndex: 1
},
"unselectableSelector" : '',
"onSliderLoaded" : '',
"onSliderUpdate" : '',
"onSliderResize" : '',
"onSlideStart" : '',
"onSlideChange" : '',
"onSlideComplete" : ''
});
});
</script>

Change log:

2014-10-26

• Fixed scrollbar disable on short content
• Fixed demo

v1.0.17 (2014-04-06)

• update to the latest version.

v1.0.16 (2014-02-16)

• update to the latest version.

---

This awesome jQuery plugin is developed by iosscripts. For more Advanced Usages, please check the demo page or visit the official website.