"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.

UnoSlider requires the jQuery library version 1.4.0 or more recent
<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.

You are not forced to use <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

And you're done! That was the most basic installation of UnoSlider into your webpage. See other sections for advanced features and 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>
Just don't forget to properly style your html slides

Options Overview of customization capabilities

Pass options object to the initializer

$('#slider').unoslider({ 
  //pass options here 
});
Example:
$('#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 set slidesTag to div

$('#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 selectors
slidesTag: '#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, use progress

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 captions

See 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
Use random 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
Use this option if you want to place the indicator on totally different position than the slider actualy is.

Example:
$('#slider').unoslider({ 
  indicator: { 
    position: '#elsewhere' 
  } 
});
You can use any of the valid jQuery selectors
position: '#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

true hide all controls
false turn off autohide
array hide only specific controls.
Possible values are play pause next and prev

Example:
$('#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 to false 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 to false if you want to stop the slideshow after a manual change

infinite: boolean (default value: true)

Slideshow continues in an infinite loop
Set to false 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>
Don't forget to properly style the content of your advanced captions.

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>
CSS example
.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' />  
Please note that the theme CSS files all require the images to be in the same folder as the CSS file by default.
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!

Feel free to inspect the CSS files if you want to create your own theme. They are all well commented.

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 
});
You can not set any of the animation options if you use the presets

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] 
});

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

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 may better use Custom Presets if you want to change only animation and block options

You can set different options for each slide. For options reference see Options section

Possible options:
scale, 
tooltip, 
slideshow: { 
  speed 
}, 
block: { 
  vertical, 
  horizontal 
}, 
animation: { 
  speed, 
  delay, 
  transition, 
  variation, 
  pattern, 
  direction, 
  color 
}
Example of usage:
$('#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
Example usage:
<!-- 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); 
}); 

ChangelogWhat has changed

Version 1.3

Bugfix: Responsive feature does not work

Version 1.2

Update: Interruptible animated layers
Update: jQuery updated to v. 1.7.1
Update: Fixed typos in the documentation
Update: Responsive slider have 100% width instead of a 90%
Bugfix: Fade animation flickering in new Chrome
Bugfix: Various small bugs has been fixed

Version 1.1

Bugfix: Various small bugs has been fixed

Version 1.0

Initial release