giodelgado
New Member
i have a slider that scrolls on drag using the jquery UI however the handle seems to drag slightly to far off the end of the slide bar can anyoune see why this might be?HTML\[code\] <div id="content"><div id="sliderContent"> <div class="viewer"> <div class="content-conveyor ui-helper-clearfix"> <div class="item"> <img src="http://stackoverflow.com/questions/6736110/images/slide_image_one.png"/> </div> <div class="item"> <img src="http://stackoverflow.com/questions/6736110/images/slide_image_one.png"/> </div> <div class="item"> <img src="http://stackoverflow.com/questions/6736110/images/slide_image_one.png"/> </div> <div class="item"> <img src="http://stackoverflow.com/questions/6736110/images/slide_image_one.png"/> </div> <div class="item"> <img src="http://stackoverflow.com/questions/6736110/images/slide_image_one.png"/> </div> </div> </div> <div id="slider"></div> </div> </div>\[/code\]CSS /* Sliding banner element */\[code\]#sliderContent { width:900px; padding:0 0 0 0;}.viewer { width:900px; height:299px; padding:0px; overflow:hidden; position:relative;}.content-conveyor { width:900px; height:299px; position:relative; }.item { width:450px; height: 299px; float:left;}#slider {margin: 10px 0 0 0;}.ui-slider-horizontal { height: 4px; background: url(../images/slider_bg.png
; border: none; width: 900px; float: left;}.ui-slider .ui-slider-handle { cursor: default; height: 15px; position: absolute; width: 25px; z-index: 2; background: url('../images/slider_handle.png') no-repeat; border: none;}\[/code\]javascript\[code\]<script type="text/javascript"> $(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); }); </script>\[/code\]
; border: none; width: 900px; float: left;}.ui-slider .ui-slider-handle { cursor: default; height: 15px; position: absolute; width: 25px; z-index: 2; background: url('../images/slider_handle.png') no-repeat; border: none;}\[/code\]javascript\[code\]<script type="text/javascript"> $(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); }); </script>\[/code\]