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

Diameter:
15 Lightyears

Mass:
800 solar masses

Catalogue number:
M17 / NGC6618

Discovered in:
1764

Discoverer:
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() {

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

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

//config
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
$("#slider").slider(sliderOpts);
});

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

Be Sociable, Share!

Leave a comment