Documentation

Logo

Overview


The jQuery uSlider is a jQuery plugin written by Marius Stanciu - Sergiu for Userdot, a plugin that allows you to embed beautiful slideshows into your webpages.

Download


You can download the last version of the plugin, or browse the archive for older versions.

Usage

First you need to include the jQuery library, since uSlider is a plugin. You can download it from the jQuery website or link it directly from the Google CDN.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

Secondly, you need to include the jQuery uSlider javascript and the css file into your page. You can do it by adding the code below to your page.

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

Next, you implement the structure for the slider. This is done using lists and images.

<ul id="uslider" class="uslider">
   <li><img src="images/demo/sample1.jpg" /></li>
   <li><img src="images/demo/sample2.jpg" /></li>
   <li><img src="images/demo/sample3.jpg" /></li>
</ul>

As the last step, you trigger the uSlider function on the element you just created. In this case, we trigger the function on the ul with the id uslider.

<script type="text/javascript">
$(document).ready(function(){
   $('#uslider').uSlider();
});
</script>

Options


autoplay - if the slider will autoplay. Options can be: true/false

distance -

duration -

Demo

  • the Dalaran Arena
  • the Trial of Champion
To Top