Knowledge Walls
Gopal Rao
Mumbai, Maharashtra, India
Passcode:
Photo slider with jquery example in Components of JQuery Examples
2487 Views
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 
  Copyright © 2014 Knowledge walls, All rights reserved
KnowledgeWalls
keep your tutorials and learnings with KnowledgeWalls. Don't lose your learnings hereafter. Save and revise it whenever required.
Click here for more details