a Content Slider with jQuery UI

a Content Slider with jQuery UI

We’re going to be using the jQuery UI slider widget to create an attractive and functional content slider. We’ll have a container, which has a series of elements each containing different blocks of content. There will be too many of these elements to display at once, so we can use the slider to move the different content blocks in and out of view.


Getting Started


Let’s make a start on the basic page and underlying HTML first; in your text editor create the following page:

jQuery UI Slider

Some well known galactic nebulae and their vital statistics

Omega Nebula

Omega Nebula

Distance from Earth:
5000 - 6000 lightyears

15 Lightyears

800 solar masses

Catalogue number:
M17 / NGC6618

Discovered in:

Philippe Loys de Chéseaux

Adding the Slider Widget

All we need to do now is add the JavaScript that will initialise the slider and control our content blocks. Directly after the script element linking to jQuery UI in slider.html add the following code:

$(function() {

var conveyor = $(".content-conveyor", $("#sliderContent")),
item = $(".item", $("#sliderContent"));

//set length of conveyor
conveyor.css("width", item.length * parseInt(item.css("width")));

var sliderOpts = {
max: (item.length * parseInt(item.css("width"))) - parseInt($(".viewer", $("#sliderContent")).css("width")),
slide: function(e, ui) {
conveyor.css("left", "-" + ui.value + "px");

//create slider

Download: http://www.htmldrive.net/items/download/107

Leave a comment