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

### List of presets

These are all presets that you can use. Click to the name for preview

chess flash spiral_reversed spiral sq_appear sq_flyoff sq_drop sq_squeeze sq_random sq_diagonal_rev sq_diagonal sq_fade_random sq_fade_diagonal_rev sq_fade_diagonal explode implode fountain blind_bottom blind_top blind_right blind_left shot_right shot_left alternate_vertical alternate_horizontal zipper_right zipper_left bar_slide_random bar_slide_bottomright bar_slide_bottomright bar_slide_topright bar_slide_topleft bar_fade_bottom bar_fade_top bar_fade_right bar_fade_left bar_fade_random v_slide_top h_slide_right v_slide_bottom h_slide_left stretch squeez fade none

## 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

- swap
- stretch
- squeeze
- shrink
- grow
- slide_in
- slide_out
- drop
- appear
- flash
- fade

- #### Variations

  top right bottom left

      $('#slider').unoslider({
        animation: {
          transition: 'swap',
          variation: 'variation name' // one of the above list of variations
        }
        // other options
      });

- #### Variations

  center vertical horizontal alternate

      $('#slider').unoslider({
        animation: {
          transition: 'stretch',
          variation: 'variation name' // one of the above list of variations
        }
        // other options
      });

- #### Variations

  center vertical horizontal alternate

      $('#slider').unoslider({
        animation: {
          transition: 'squeeze',
          variation: 'variation name' // one of the above list of variations
        }
        // other options
      });

- #### Variations

  topleft topright bottomleft bottomright

      $('#slider').unoslider({
        animation: {
          transition: 'shrink',
          variation: 'variation name' // one of the above list of variations
        }
        // other options
      });

- #### Variations

  topleft topright bottomleft bottomright

      $('#slider').unoslider({
        animation: {
          transition: 'grow',
          variation: 'variation name' // one of the above list of variations
        }
        // other options
      });

- #### Variations

  top right bottom left alternate_vertical alternate_horizontal

      $('#slider').unoslider({
        animation: {
          transition: 'slide_in',
          variation: 'variation name' // one of the above list of variations
        }
        // other options
      });

- #### Variations

  top right bottom left alternate_vertical alternate_horizontal

      $('#slider').unoslider({
        animation: {
          transition: 'slide_out',
          variation: 'variation name' // one of the above list of variations
        }
        // other options
      });

- #### Variations

  topleft topright bottomleft bottomright top right bottom left alternate_vertical alternate_horizontal

      $('#slider').unoslider({
        animation: {
          transition: 'drop',
          variation: 'variation name' // one of the above list of variations
        }
        // other options
      });

- #### Variations

  topleft topright bottomleft bottomright top right bottom left alternate_vertical alternate_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

- horizontal
- vertical
- diagonal
- spiral
- horizontal_zigzag
- vertical_zigzag
- explode
- implode
- chess
- random

- #### Directions

  top bottom topleft topright bottomleft bottomright

      $('#slider').unoslider({
        animation: {
          pattern: 'horizontal',
          direction: 'direction name' // one of the above list of directions
        }
        // other options
      });

- #### Directions

  left right topleft topright bottomleft bottomright

      $('#slider').unoslider({
        animation: {
          pattern: 'vertical',
          direction: 'direction name' // one of the above list of directions
        }
        // other options
      });

- #### Directions

  topleft topright bottomleft bottomright

      $('#slider').unoslider({
        animation: {
          pattern: 'diagonal',
          direction: 'direction name' // one of the above list of directions
        }
        // other options
      });

- #### Directions

  topleft topright bottomleft bottomright

      $('#slider').unoslider({
        animation: {
          pattern: 'spiral',
          direction: 'direction name' // one of the above list of directions
        }
        // other options
      });

- #### Directions

  topleft topright bottomleft bottomright

      $('#slider').unoslider({
        animation: {
          pattern: 'horizontal_zigzag',
          direction: 'direction name' // one of the above list of directions
        }
        // other options
      });

- #### Directions

  topleft topright bottomleft bottomright

      $('#slider').unoslider({
        animation: {
          pattern: 'vertical_zigzag',
          direction: 'direction name' // one of the above list of directions
        }
        // other options
      });

- #### Directions

  center top right bottom left

      $('#slider').unoslider({
        animation: {
          pattern: 'explode',
          direction: 'direction name' // one of the above list of directions
        }
        // other options
      });

- #### Directions

  center top right bottom left

      $('#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);
    });

## Changelog What 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