I'm looking to create an image "slider" that reveals the image underneath when the user grabs the handle and drags it.
Check out this example: http://jsfiddle.net/M8ydk/1/
In the provided example, the user can grab the handle and move it on the slider. I want to achieve a similar effect, except with the image being uncovered.
<div id="slider">
<ul>
<li style="background-color: #F00"></li>
<li style="background-color: #0F0"></li>
<li style="background-color: #00F"></li>
</ul>
</div>
#slider {
width: 400px;
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
width: 400px;
height: 400px;
float: left;
}
Number.prototype.roundTo = function(nTo) {
nTo = nTo || 10;
return Math.round(this * (1 / nTo) ) * nTo;
}
$(function() {
var slides = $('#slider ul').children().length;
var slideWidth = $('#slider').width();
var min = 0;
var max = -((slides - 1) * slideWidth);
$("#slider ul").width(slides*slideWidth).draggable({
axis: 'x',
drag: function (event, ui) {
if (ui.position.left > min) ui.position.left = min;
if (ui.position.left < max) ui.position.left = max;
},
stop: function( event, ui ) {
$(this).animate({'left': (ui.position.left).roundTo(slideWidth)})
}
});
});
The result image will change as shown in the following example:
By replacing the background image, both images appear parallel. However, I want them to overlay each other like in the second image.
Current Results: https://i.sstatic.net/pCd73.jpg
Desired Results: https://i.sstatic.net/QYyDP.png