jQuery UI Slider

This is a Slider Script that uses jQueryui ui.

JavaScript
The carousel.js file contains these lines of code that make the slider work:

Here script attributes define the following values:
•  #featured – the id of script container (the id of a tag container <div>);
•  {fx:{opacity: “toggle”} – this attribute defines the effect for changing the slides; currently it is set for changing opacity;
•  5000 – slides changing rate.

HTML
HTML is formed of two logical blocks: thumbnails block (.ui-tabs-nav class) and content blocks corresponding to the current thumbnail (all the <div> tags with a .ui-tabs-panel class). Both of these blocks are part of a <div> tag by #featured id.
Each item in the list of thumbnails (<li> tag) gets #nav-fragment-# id, where # is the number of the slide. The correspondent content boxes get #fragment-# id.
Below you can see the HTML script representation:

To replace the slides with the custom ones you will need to replace the images placed to <div> tags with the .ui-tabs-panel class.
To replace thumbnails with the custom ones you will need to replace the images that are within the list <li> tags with the .ui-tabs-nav class.

CSS
You can find script related stylesheet in the main style.css file. You will need to modify the following styles: