CODICE HTML

• Item one
• Item two
• Item three, etc…

slider label 1
slider label 2
slider label 3

CODICE CSS

 
.sliderGallery {
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 960px;
}
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
 
.sliderGallery UL LI {
display: inline;
}
 
.handle {
position: absolute;
cursor: move;
top: 0;
z-index: 100;
/* bespoke to your own solution */
height: 17px;
width: 181px;
}
 

CODICE JAVASCRIPT

 
$(window).ready(function () {
$(‘div.sliderGallery’).each(function () {
var ul = $(‘ul’, this);
var productWidth = ul.innerWidth() – $(this).outerWidth();
 
var slider = $(‘.slider’, this).slider({
handle: ‘.handle’,
minValue: 0,
maxValue: productWidth,
slide: function (ev, ui) {
ul.css(‘left’, ‘-’ + ui.value + ‘px’);
},
stop: function (ev, ui) {
ul.animate({ ‘left’ : ‘-’ + ui.value + ‘px’ }, 500, ‘linear’);
}
});
});
});
 

fonte: www.sastgroup.com