|
Introduction
In this example i developed the code by using jquery to slide the photos with next and prev buttons. By clicking the button photo slides.
Preview of photo slider:
|
Html code with jquery and CSS
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" /> <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
function showit(index) {
index = index + 1;
$("#photo_slider img").css("display", "none");
$("#photo_slider img[present*='yes']").attr("present", "");
$("#photo_slider img:nth-child(" + index + ")").attr("present", "yes");
$("#photo_slider img:nth-child(" + index + ")").css("display", "block");
}
$(function () {
$("#move_prev_button").click(function () {
index = $("#photo_slider img[present*='yes']").index();
if (index == 0) {
index = $("#photo_slider img").length - 1;
} else {
index--;
}
showit(index);
});
$("#move_next_button").click(function () {
index = $("#photo_slider img[present*='yes']").index();
if (index == ($("#photo_slider img").length - 1)) {
index = 0;
} else {
index++;
}
showit(index);
});
});
</script>
<style>
#photo_slider img {
display: none;
}
img{
width:400px;
height:200px;
}
</style>
</head>
<body>
<table border="0" cellpadding="0" cellspacing="3" height="auto" width="auto">
<tr>
<td colspan="2" align="center" valign="middle">
<div id="photo_slider">
<img present="yes" src="http://www.swaratours.com/sites/default/files/sangeh-money-forest-10.jpg" style="display: block;" />
<img src="http://lsd.gravitasrecordin.netdna-cdn.com/wp-content/uploads/2013/04/Lion.jpg" />
<img src="http://upload.wikimedia.org/wikipedia/commons/1/17/Tiger_in_Ranthambhore.jpg" />
</div>
</td>
</tr>
<tr>
<td align="left">
<button id="move_prev_button">Prev</button>
</td>
<td align="right">
<button id="move_next_button">Next</button>
</td>
</tr>
</table>
</body>
</html>
|
|
Example Demo
|
