Vertical Fullscreen Image Slider with jQuery - Fullscreen Slider

Fullscreen Slider is a lightweight and simple plugin for creating a fullscreen slider with thumbnails and arrows navigation. With this plugin, the visitor can navigate through a set of images vertically with smooth transition effects.

How to use it:

1. Include the jQuery library and jQuery Fullscreen Slider plugin in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="js/slider.js"></script>

2. Include jQuery transit plugin for CSS3 transition effects.

<script src="js/transit.js"></script> 

3. The Html structure for the slider.

<div class="slider">
<ul>
<li><img src="img/image.jpg" alt=""></li>
<li><img src="img/image2.jpg" alt=""></li>
<li><img src="img/image3.jpg" alt=""></li>
<li><img src="img/image4.jpg" alt=""></li>
<li><img src="img/image5.jpg" alt=""></li>
<li><img src="img/image6.jpg" alt=""></li>
</ul>
<div class="slider-nav"> <a href="#" class="up" data-direction="up"></a> <a href="#" class="down" data-direction="down"></a> </div>
</div>

4. The required CSS styles.

html, body {
height: 100%;
margin: 0;
padding: 0;
}
.slider {
height: 100%;
overflow: hidden;
}
.slider ul {
position: relative;
top: 0;
height: 100%;
margin: 0;
padding: 0;
}
.slider ul li {
overflow: hidden;
position: relative;
width: 100%;
height: 100%;
}
li img {
position: absolute;
width: 100%;
height: auto;
top: 50%;
-webkit-transform: translateY(-50%);
}
.slider-nav {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 9000;
}
.up, .down {
position: relative;
left: 0;
display: inline-block;
height: 50%;
width: 100%;
z-index: 9000;
}
.up {
top: 0;
cursor: url(../img/arrow-up.png), auto;
}
.down {
bottom: 0;
cursor: url(../img/arrow-down.png), auto;
}
.pagination {
position: absolute;
bottom: 10px;
left: 10px;
z-index: 9999;
}
.pagination a {
display: inline-block;
margin-left: 10px;
}
.pagination a:first-child {
margin-left: 0;
}
.slider-thumbnail {
width: 100px;
height: 100px;
}
.active {
border: 1px solid white;
}

---

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