"UnoSlider" premium image slider
Created: 10/10/2011
Updated: 02/04/2012
Version: 1.3
By: Unodor
Thank you for purchasing my jQuery plugin. If you have any questions that are beyond the scope of this help file, please feel free to contact me via my user page contact form.
Installation A few basic steps required to install the slider
Link files
Add these files to the <head>
of your document
This will link jQuery and UnoSlider CSS and JavaScript files into your webpage.
<head> <script src='jquery-1.7.1.min.js' type='text/javascript'></script> <script src='unoslider.js' type='text/javascript'></script> <link href='unoslider.css' rel='stylesheet' type='text/css' /> <link href='themes/modern/theme.css' rel='stylesheet' type='text/css' /> </head>
Add HTML markup
The basic UnoSlider markup is really simple. First, start with a single containing element, <ul id='slider' class='unoslider'>
in this example. Then, create a element that contains individual slides. Default is set to <li>
. Put your images into each <li>
and your slider is almost ready.
<ul> <li>
html structure. You can use any html tags you want.<!-- place somewhere in your html file --> <ul id='slider' class='unoslider'> <li><img src='/path/to/image.jpg' /></li> <li><img src='/path/to/image.png' /></li> <li><a href='something'><img src='/path/to/image.gif' /></a></li> <!-- add a link --> </ul>
Initialize slider
Insert the following code into your html page. $(document).ready()
ensures that the content of the page is loaded before the plugin initializes.
<script type='text/javascript'> $(document).ready(function(){ $('#main-slider').unoslider(); }); </script>
Slider size
You can change slider width and height in unoslider.css
file, or through Options
Html content Add a custom content to your slider
You don't have to use only images. You can use any html markup that you want
<ul id='slider'> <li><div><h3>This will work</h3></div></li> <li><p>This will work too! <strong>No, really, it will :)</strong></p></li> </ul>
Options Overview of customization capabilities
Pass options object to the initializer
$('#slider').unoslider({ //pass options here });
$('#slider').unoslider({ option: 'value', another: 'value' // etc... });
Or you can overwrite defaults. This must be placed BEFORE slider initialize code
$.UnoSlider.defaults = { //pass options here };
You can also combine both methods in order to predefine default values for all sliders, and change only some minor options for each slider
$.UnoSlider.defaults = { block: { vertical: 1, horizontal: 5 } }; $('#slider-1').unoslider({ animation: { transition: 'fade' }, block: { vertical: 2 } }); $('#slider-2').unoslider({ animation: { transition: 'drop' } });
List of options
- slidesTag: string (default value: "li")
-
Wich element inside the container should serve as slide
if you would like to use
<div>
as a slide element instead of the default<li>
, you can setslidesTag
todiv
$('#slider').unoslider({ slidesTag: 'div' });
and use this markup instead<p id='slider'> <div><img src='/path/to/image1.jpg' /></div> <div><img src='/path/to/image2.jpg' /></div> </p>
You can use any of the valid jQuery selectorsslidesTag: '#some-id' slidesTag: '.class' slidesTag: 'p.slide' // etc...
Notice that this option belongs to the individual slides, NOT to the whole slider container! - width: false|integer (default value: false)
-
Slider width
Overrides the width of slider which is set in the CSS file
- height: false|integer (default value: false)
-
Slider height
Overrides the height of slider which is set in the CSS file
- scale: boolean (default value: true)
-
should the images be resized in order to fit the slider or not
If set to
true
, images are resized to slider width and height.If set to
false
, images dimensions are preserverd - responsive: boolean (default value: true)
This option makes the slider responsive. This means that the slider adjusts the width of the parent element if it is wider then the slider.
- mobile: boolean (default value: true)
-
simpler optimized transitions on mobile devices.
Set to
false
if you want to use the same transitions on desktops and mobile devices - touch: boolean (default value: true)
enable touch controls on the mobile devices
- preloader: string (default value: "progress")
-
sets images preloader style
If you want a simple spinner or something like that (it depends on CSS styles), use
spinner
If you want to add more informative with the loading progress, useprogress
You can find more information and how-tos in Preloader section. - tooltip: boolean (default value: true)
-
sets captions
Set to
false
if you want to disable the captionsSee section Tooltips for more information about captions - preset: string|array (default value: false)
-
sets presets animations if you don't want to build your own
Simply provide one or more preset animations.
// only one type of animation for all slides $('#slider').unoslider({ preset: 'fade' }); // more different animations $('#slider').unoslider({ preset: ['fade', 'chess', 'flash', 'etc...'] });
See section Presets for full list of presets you can use - order: string (default value: "in-order")
-
order of presets
The default setting for preset effects is applied in an order as they are provided
Userandom
in order to randomize the order of the preset effects$('#slider').unoslider({ preset: ['fade', 'fountain'], order: 'random' });
This option has no effect unless you use presets - indicator: object|boolean
Set it to the
false
if you want to hide the indicator. Otherwise require an array of options.- autohide: boolean (default value: false)
-
hide the indicator on mouse hover
Example:$('#slider').unoslider({ indicator: { autohide: true } });
- position: string (default value: "")
-
The element AFTER which the indicator should be inserted
Empty string means that the default position will be inside the slider container
Example:
Use this option if you want to place the indicator on totally different position than the slider actualy is.$('#slider').unoslider({ indicator: { position: '#elsewhere' } });
You can use any of the valid jQuery selectorsposition: '#some-id' position: '.class' position: 'p.something' // etc...
- navigation: object|boolean
-
Display previous, next, play and pause controls
set it to
false
if you want to disable the navigation. Otherwise require an array of options. - autohide: array|boolean (default value: ["play", "pause"])
-
auto hide whole navigation or only specific part of navigation on mouse over
Example:true
hide all controlsfalse
turn off autohidearray
hide only specific controls.
Possible values areplay
pause
next
andprev
$('#slider').unoslider({ navigation: { autohide: ['next', 'prev'] // auto hide only next and previous button } });
- next: string (default value: "Next")
text displayed for "next" control
- prev: string (default value: "Previous")
text displayed for "prev" control
- play: string (default value: "Play")
text displayed for "play" control
- stop: string (default value: "Pause")
text displayed for "pause" control
- slideshow: object|boolean
automatically changes slides
set tofalse
to disable automatic slideshow- autostart: boolean (default value: true)
slideshow starts running automatically after load
- speed: integer (default value: 1)
in seconds, slides change interval
- timer: boolean (default value: true)
display a small indicator of time remaining to the next slide change
- hoverPause: boolean (default value: true)
pause slideshow on mouse over
- continuous: boolean (default value: true)
Slideshow does not stop after a manual change of a slide
Set tofalse
if you want to stop the slideshow after a manual change- infinite: boolean (default value: true)
Slideshow continues in an infinite loop
Set tofalse
if you want to stop the slideshow after the last slide- block: object
Each transition is made up of several blocks that move and make some animation
- vertical: integer (default value: 9)
Number of blocks vertically
- horizontal: integer (default value: 3)
Number of blocks horizontally
- animation: object
Animations configuration
- speed: integer (default value: 500)
-
in miliseconds. Duration of animation
The duration is calculated for each block, not the whole slide - delay: integer (default value: 50)
-
in miliseconds. Delay between blocks
Some patterns are working with groups of blocks, not individual blocks. The delay is applied to these groups then. - transition: string (default value: grow)
-
Type of animation applied to blocks
See transition section for list of transitions and more info - variation: string (default value: topleft)
-
Variation of selected transition
See transition section for list of possible variations for each transition - pattern: string (default value: diagonal)
-
Pattern in which transition is applied
See patterns section for list of patterns and more info - direction: string (default value: topleft)
-
Direction modifier for pattern
See patterns section for list of possible directions for each pattern - color: string (default value: white)
-
Color of flash
It has the effect only if transition is set to "flash"
Tooltips Images captions
There are two ways of setup captions
The simplest way to create a tooltip is add a title
to your image.
<ul id='slider'> <li><img src='/path/to/image.jpg' title='This is the caption' /></li> </ul>
The advanced method is to add the <div class='unoslider_caption'>
tag with some content.
<ul id='slider'> <li> <div class='unoslider_caption'>you can use any html markup here</div> <img src='/path/to/image.jpg' /> </li> </ul>
Animated Layers Simple moving objects
The Animated layers are simple feature that allows you to create an animated captions
All you need to do is create a container with the unoslider_layers
class and insert your layers into that container.
Each layer is a <div>
tag with an animation type class and content.
Add more classes to your layers and style them properly. Use the position: absolute
for positioning.
Available effects are: slide_top
slide_right
slide_bottom
slide_left
and fade
<ul id='slider'> <li> <div class='unoslider_layers'> <div class='slide_right example1'>This will slide in from left to right</div> <div class='slide_left example2'>This will slide in from right to left</div> <div class='slide_top example3'>This will slide in from bottom to top</div> <div class='slide_bottom example4'>This will slide in from top to bottom</div> <div class='fade example5'>This will just fade in</div> <!-- you can use whatever you want, not just a text --> <div class='fade image'><img src='image.jpg' /></div> </div> <img src='/path/to/image.jpg' /> <!-- your slide --> </li> </ul>
.example1{ color: #cccccc; /* font color */ font-size: 23px; /* font size */ position: absolute; /* IMPORTANT for positioning */ top: 30px; /* 30px from top side */ left: 50px; /* 50px from left side */ }
Themes Customize the look & feel
Theme is just a simple CSS file and images.
UnoSlider comes with a 12 themes from which you can choose. You can find them in the "themes" folder.
Simply add the css file with the theme to the <head>
element.
All the possible themes are: basic
, elegant
, inline
, light
, minimalist
, modern
, panel
, ribbon
, slick
, smooth
, square
and text
<link href='themes/ThemeName/theme.css' rel='stylesheet' type='text/css' />
If you want to put the images in a separate folder, don’t forget to update the image paths in the theme’s CSS file!
Presets Prebuilt transition configurations
The presets are preset animation configurations that you can use if you don't want to build your own animations
// only one preset for all slides $('#slider').unoslider({ preset: 'chess' // other options });
// multiple presets $('#slider').unoslider({ preset: ['chess', 'flash', 'spiral'], // you can set as many presets as you want order: 'random' // order of presets // other options });
Custom Presets
You can also create your own presets. Simply create a JavaScript object with the animation
and block
options and use it as a regular preset.
var my_preset = { animation: { transition: 'swap', variation: 'left' // etc... } }; var another = { animation: { transition: 'fade', pattern: 'chess' }, block: { vertical: 8, horizontal: 3 } }; $('#slider').unoslider({ preset: [my_preset, 'flash', another] });
List of presets
These are all presets that you can use. Click to the name for preview
Transitions The animation effects
The transition is a cornerstone of the animation. Almost each transition has some variations
$('#slider').unoslider({ animation: { transition: 'swap', variation: 'top' } // other options });
List of transitions and variations
These are all transitions and variations that you can use. Click to the name for example
-
Variations
toprightbottomleft$('#slider').unoslider({ animation: { transition: 'swap', variation: 'variation name' // one of the above list of variations } // other options });
-
Variations
centerverticalhorizontalalternate$('#slider').unoslider({ animation: { transition: 'stretch', variation: 'variation name' // one of the above list of variations } // other options });
-
Variations
centerverticalhorizontalalternate$('#slider').unoslider({ animation: { transition: 'squeeze', variation: 'variation name' // one of the above list of variations } // other options });
-
Variations
toplefttoprightbottomleftbottomright$('#slider').unoslider({ animation: { transition: 'shrink', variation: 'variation name' // one of the above list of variations } // other options });
-
Variations
toplefttoprightbottomleftbottomright$('#slider').unoslider({ animation: { transition: 'grow', variation: 'variation name' // one of the above list of variations } // other options });
-
Variations
toprightbottomleftalternate_verticalalternate_horizontal$('#slider').unoslider({ animation: { transition: 'slide_in', variation: 'variation name' // one of the above list of variations } // other options });
-
Variations
toprightbottomleftalternate_verticalalternate_horizontal$('#slider').unoslider({ animation: { transition: 'slide_out', variation: 'variation name' // one of the above list of variations } // other options });
-
Variations
toplefttoprightbottomleftbottomrighttoprightbottomleftalternate_verticalalternate_horizontal$('#slider').unoslider({ animation: { transition: 'drop', variation: 'variation name' // one of the above list of variations } // other options });
-
Variations
toplefttoprightbottomleftbottomrighttoprightbottomleftalternate_verticalalternate_horizontal$('#slider').unoslider({ animation: { transition: 'appear', variation: 'variation name' // one of the above list of variations } // other options });
-
flash has no variation
flash example$('#slider').unoslider({ animation: { transition: 'flash', color: '#ffffff' // set flash color } // other options });
-
fade has no variation
fade example$('#slider').unoslider({ animation: { transition: 'fade' // set only transition } // other options });
Patterns Moving directions
The pattern indicates a pattern and direction in which the transition will be applied to the individual blocks. Almost each pattern has some directions
$('#slider').unoslider({ animation: { pattern: 'horizontal', direction: 'top' } // other options });
List of patterns and directions
These are all patterns and directions that you can use. Click to the name for example
-
Directions
topbottomtoplefttoprightbottomleftbottomright$('#slider').unoslider({ animation: { pattern: 'horizontal', direction: 'direction name' // one of the above list of directions } // other options });
-
Directions
leftrighttoplefttoprightbottomleftbottomright$('#slider').unoslider({ animation: { pattern: 'vertical', direction: 'direction name' // one of the above list of directions } // other options });
-
Directions
toplefttoprightbottomleftbottomright$('#slider').unoslider({ animation: { pattern: 'diagonal', direction: 'direction name' // one of the above list of directions } // other options });
-
Directions
toplefttoprightbottomleftbottomright$('#slider').unoslider({ animation: { pattern: 'spiral', direction: 'direction name' // one of the above list of directions } // other options });
-
Directions
toplefttoprightbottomleftbottomright$('#slider').unoslider({ animation: { pattern: 'horizontal_zigzag', direction: 'direction name' // one of the above list of directions } // other options });
-
Directions
toplefttoprightbottomleftbottomright$('#slider').unoslider({ animation: { pattern: 'vertical_zigzag', direction: 'direction name' // one of the above list of directions } // other options });
-
Directions
centertoprightbottomleft$('#slider').unoslider({ animation: { pattern: 'explode', direction: 'direction name' // one of the above list of directions } // other options });
-
Directions
centertoprightbottomleft$('#slider').unoslider({ animation: { pattern: 'implode', direction: 'direction name' // one of the above list of directions } // other options });
-
chess has no direction
chess example$('#slider').unoslider({ animation: { pattern: 'chess' // set only pattern } // other options });
-
random has no direction
random example$('#slider').unoslider({ animation: { pattern: 'random' // set only pattern } // other options });
Per slide settings Make each slide unique
You can set different options for each slide. For options reference see Options section
scale, tooltip, slideshow: { speed }, block: { vertical, horizontal }, animation: { speed, delay, transition, variation, pattern, direction, color }
$('#slider').unoslider({ 1: { // for slide no. 1 tooltip: false, slideshow: { speed: 10 }, block: { vertical: 3 }, animation: { speed: 300, delay: 100, transition: 'fade' } }, 2: { // for second slide scale: false, animation: { transition: 'drop', variation: 'topleft', pattern: 'diagonal', direction: 'bottomright' } }, 3: { // options for third slider } // and so on });
Of course you can create and use a javascript object
var slide_one = { slideshow: { speed: 10 } }; var slide_two = { slideshow: { speed: 30 } }; $('#slider').unoslider({ 1: slide_one, 2: slide_two });
Preloader Before the images are loaded
There are two preloader styles. Spinner and progress.
Spinner simply show some sort of a rotating wheel or something. It depends on what image you set in the CSS file
.unoslider_spinner { background: url('/images/spinner.gif') #ffffff center center no-repeat; }
You can also change appearance of the progress preloader.
In the CSS file you can find the .unoslider_preloader
and .unoslider_progress
classes
Edit .unoslider_preloader
to change the background color.
Edit .unoslider_progress
to change the progress bar look.
.unoslider_preloader { background: #2e425a; /* change background color */ } .unoslider_preloader .unoslider_progress { /* a lot of customizable properties, look into your CSS file */ }
Public Methods Public access to the slider controls
You can use the public methods to stop or start the slideshow, or navigate between the slides.
// create slider variable var slider = $('#slider').unoslider({ slidesTag: 'div' // etc }); // and use it slider.stop(); // this will stop the slideshow
<!-- html links --> <a href='#' class='stop'>Stop Slideshow</a> <a href='#' class='start'>Start Slideshow</a> <a href='#' class='prev'>Previous Slide</a> <a href='#' class='next'>Next Slide</a> <a href='#' class='goto'>Go to Slide no. 5</a>
var slider = $('#slider').unoslider({ slidesTag: 'div' }); // stop slideshow $('.stop').click(function(){ slider.stop(); }); // start slideshow $('.start').click(function(){ slider.play(); }); // Previous Slide $('.prev').click(function(){ slider.prev(); }); // Next Slide $('.next').click(function(){ slider.next(); }); // Go to slide no. 5 $('.goto').click(function(){ slider.goto(5); });