If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)


jQuery UI Slider

This is a Slider Script that uses jQueryui ui.

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

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

jQuery UI Slider, 4.0 out of 5 based on 1 rating