JS - Navigation Slider
HTML
<div class="box">
<div class="btnHolder">
<span class="b btn1">Button 1</span>
<span class="b btn2">Button 2</span>
<span class="b btn3">Button 3</span>
</div>
<img src="http://www.nuflowwidebay.com.au/wp-content/uploads/2015/10/expences-button-png-hi.png" />
</div>
CSS
.box img {
transition: 0.1s;
position: absolute;
z-index: 0;
top: 2px;
}
.btnHolder {
position: absolute;
z-index: 1;
left: 0;
width: 100%;
}
.b {
width: 33.33%;
text-align: center;
float: left;
cursor: pointer;
}
JavaScript
// Initialize variables
var width_spn = $('.b').width();
var width_btn = 100;
// Initialize position
$('.box img').css({
width: width_btn,
left: (width_spn / 2) - (width_btn / 2)
});
// Setup animation
$('.b').click(function() {
var left = $(this).position().left + (width_spn / 2) - (width_btn / 2);
$('.box img').stop().animate({
'left': left
});
});