<!DOCTYPE html>
<html>
<head>
<script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="style.css" rel="stylesheet" />
<script src="script.js"></script>
</head>
<body>
<table>
<tr>
<td class="center">
<img src="http://icons.iconarchive.com/icons/visualpharm/must-have/32/Next-icon.png" id="right" />
</td>
<td class="box">
<img src="http://icons.iconarchive.com/icons/ph03nyx/super-mario/64/Racoon-Mario-icon.png" />
</td>
<td class="center">
<img src="http://icons.iconarchive.com/icons/visualpharm/must-have/32/Previous-icon.png" id="left" />
</td>
</tr>
</table>
</body>
</html>
$(document).ready(function() {
var boxwidth = $(".box").width() - $(".box").offset().left - 20,
boxpositionleft = true;
$("#right").click(function() {
if (boxpositionleft) {
$(".box > img").animate({right: "-=" + boxwidth + "px"});
boxpositionleft = false;
}
});
$("#left").click(function() {
if (!boxpositionleft) {
$(".box > img").animate({right: "+=" + boxwidth + "px"});
boxpositionleft = true;
}
});
});
/* Styles go here */
.center {
vertical-align: middle;
width: 20px;
height: 100px;
background: rgba(5, 5, 5, 0.2);
}
.center img {
cursor: pointer;
}
.center: hover {
background: rgba(5, 5, 5, 0.4);
}
.box {
height: 100px;
width: 400px;
background: rgba(5, 5, 5, 0.6);
vertical-align: middle;
}
.box > img {
position: relative;
}
Animate Left right to a image