Fullscreen jQuery Image Scroller with CSS3 Transitions - Assisted Scroll

Assisted Scroll is a vertical jQuery slider plugin that allows you utilize mouse wheel to scroll through images with CSS3 transition based sliding effects.

How to use it:

1. Include required jQuery javascript library and jQuery mousewheel plugin in the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="src/lib/mousewheel.js" type="text/javascript"></script> 

2. Include the jQuery Assisted Scroll plugin after jQuery library.

<script src="dist/jquery.assistedscroll.min.js" type="text/javascript"></script> 

3. Wrap the image slides in the DIV elements.

<div id="slides" class="slides">
<div class="slide a"> <img src="1.jpg"> </div>
<div class="slide b"> <img src="2.jpg"> </div>
<div class="slide c"> <img src="3.jpg"> </div>
</div>

4. Add the required CSS styles in your exist CSS file.

html, body {
position: relative;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
/* Slides */
.slides {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.slides .slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-transition: top 500ms ease;
-moz-transition: top 500ms ease;
-ms-transition: top 500ms ease;
-o-transition: top 500ms ease;
transition: top 500ms ease;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/* Transitions */
.slides .active {
top: 0;
}
.slides .old {
top: -100%;
}
/* Imagry */
.slides .slide img {
width: 100%;
min-height: 100%;
}
/* Colors */
.slides .a {
background: #bada55;
}
.slides .b {
background: #ff00ff;
}
.slides .c {
background: #ccc;
}
.slides .d {
background: #222;
}

5. Call the plugin with some options.

<script type="text/javascript">
$(function() {
$("#slides").assistedScroll({
delay: 500,   // Lines up with our CSS transitions
startingZ: 10 // Slides should start being indexed at 10
});
});
</script>

---

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