jQuery Responsive Vertical Image Slider Plugin - UpSlide.js

UpSlide.js is a responsive image slider plugin for jQuery and jQuery UI that helps you create a fullscreen one page scrolling website. Supports easing effects, auto slide mode, thumbnails, arrow/scrolling controls, and more.

How to use it:

1. Include the jQuery javascript library and jQuery UI in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>

2. Include jQuery UpSlide's script and stylesheet files in the page.

<link href="css/upslide.css" type="text/css" rel="stylesheet" />
<script src="js/jquery.upslide.js"></script>

3. Include jQuery mousewheel plugin for mouse wheel support.

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

4. Markup html structure.

<div id="upslide" class="upslide">
<ul>

<li class="upslide-bannerBackground" style="display: block;background:url('img/slide1.jpg') no-repeat;background-position:center">
<div>
<p class="upslide-bannerText">Slide 1</p>
</div>
</li>

<li class="upslide-bannerBackground" style="display: block;background:url('img/slide2.jpg') no-repeat;background-position:center">
<div>
<p class="upslide-bannerText">Slide 2</p>
</div>
</li>

...

</ul>
</div>

5. Call the plugin with options.

<script type="text/javascript">
$(document).ready(function(){
var upslide = $('#upslide > ul').upslide({
// how fast the slide will transition
speed: 2000,

// delay between slide transitions
delay: 3000,

// effect to use for slide transition
easing: 'linear',

// fade headers in during slide transition
fadingHeaders: false,

// how fast to fade in headers during transition
fadingHeadersSpeed: 2000,

// hide the header text (useful if you want the header text on the thumbnails but not the slide)
headerHideText: false,

// transaparency of the header background
headerBackgroundTransparency: 0.5,

// colors to apply to the header's background
headerBackgroundColor: ['red', 'green'],

// generate colors that are not assigned a color (if false then it will cycle through "headerBackgroundColor")
headerGenerateBackgroundColor: true,

// make the thumbnail indicator the same color as the current slide's header background
sameSlideAndHeaderColor: true,

// make it fullscreen
fullscreen: false,

// slide automatically
autoSlide: true,

// allow users to use "up" and "down" arrows to navigate the slides
arrowControl: false,

// allow users to use the scrolling on the mouse to navigate (requires: mousewheel.js)
scrollControl: false,

// show thumbnails of the slides
thumbnail: true,

// position of the thumbnails
thumbnailPosition: 'left',

// show the header text on the thumbnails
thumbnailHeader: false,

// border size (if any) of the thumbnails to adjust for the height of the slides
thumbnailBorderSize: '0',

// width of the thumbnails in relation to the parent of the slide (if fullscreen, then in relation to the width of the screen)
thumbnailWidth: '10%',

// desired height of the thumbnails
thumbnailHeight: 'auto',

// allow scrolling the thumbnails (does not control the slider, think of it as allowing you to browse)
thumbnailWrapperScrollable: false,

// thumbnail indicator options
thumbnailIndicator: {
    // speed at which it moves to the next slide
    speed: 2000,
    // effect to use for the transition
    easing: 'linear',
    // color for the slider (if "sameSlideAndHeaderColor" is true, then this gets ignored)
    backgroundColor: [],
    // width of the indidcator
    width: '2px',
    // position of the slider
    position: {
        // the side of the thumbnails it is on
        side: 'right',
        // put it on the inside of the thumbnail (overlap the thumbnail) or outside (show all of the thumbnail)
        inOrOut: 'in'
    }
},
// call a function when a slide slides
onSlide: function() { return false; },
// call a function when the slide starts to slide
onSlideStart: function() { return false; },
// call a function when the slide completes its slide
onSlideComplete: function() { return false; }
});
});
</script>

Change log:

v2.0.1 (2014-01-18)

• • Fixed thumbnail indicator going off-screen when set to the right side
  • Some code optimizations

v1.5.0 (2014-01-18)

• add scroll support for thumbnails

---

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