The below code is works fine
*********************** jquery ***************
<script type="text/javascript">
$(document).ready(function(){
$("#navleft").click(function() {
$("#slideshow").children(":last").fadeOut(function(){
var p = $(this).parent();
$(this).remove().prependTo(p).fadeIn();
$(p).children(":first").removeClass('visblefalse').addClass('visbletrue');
$(p).children(":first").next().removeClass('visbletrue').addClass('visblefalse');
});
});
$("#navright").click(function() {
$("#slideshow").children(":first").fadeOut(function(){
var p = $(this).parent();
$(this).remove().appendTo(p).fadeIn()
$(p).children(":first").removeClass('visblefalse').addClass('visbletrue');
$(p).children(":last").removeClass('visbletrue').addClass('visblefalse');
});
});
});
</script>
**************************** CSS ***************************
<style type="text/css">
#slideshow {
margin: 50px auto;
position: relative;
width: 240px;
height: 240px;
padding: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.4);
}
#slideshow > div {
position: absolute;
top: 10px;
left: 10px;
right: 10px;
bottom: 10px;
}
.visblefalse
{
visibility:hidden;
}
.visbletrue
{
visibility:visible;
}
</style>