Hi I have created one application for Next and Previous Demo.
I Am sending You a link.
In that if there there are 4 slide then after click on next and previous button we can see the slides.
But if the last slide(Image) is seen and then there is no image after this then net nutton should not be clicked.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="lastfirst.aspx.cs" Inherits="lastfirstdemo.Account.lastfirst" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="../JscriptText/JScriptTxt.js"> </script>
<script type="text/javascript">
$("#btnPage").live("click", function () {
$("[id*=dv]").hide();
$("#dv" + $("#txtPage").val()).show();
});
</script>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" media="screen" href="../StyleSheet1.css" />
<link rel="stylesheet" type="text/css" media="screen" href="../StyleSheet2.css" />
<script type="text/javascript" src="../Jquery/JScript2.js"></script>
<script type="text/javascript" src="../Jquery/JScript3.js"></script>
<script type="text/javascript" src="../Jquery/JScript4.js"></script>
<script type="text/javascript" src="../Jquery/JScript5.js"></script>
<script type="text/javascript">
$('#s5').cycle({
fx: 'scrollHorz',
timeout: 500,
next: '#next1',
prev: '#prev1',
timeout: 0,
pager: '#nav',
nowrap: 1
});
$('#prev').click(function () {
return false;
});
$('#next').click(function () {
return false;
});
$('#first').click(function () {
return false;
});
$('#last').click(function () {
return false;
});
</script>
<link rel="stylesheet" type="text/css" media="screen" href="../JqueryMove/StyleSheet1.css" />
<script type="text/javascript" src="../JqueryMove/JScript1.js"></script>
<script type="text/javascript" src="../JqueryMove/JScript2.js"></script>
<script type="text/javascript">
$(init);
function init() {
$('.movable').draggable({
cursor: 'move',
containment: '#s5',
cursor: 'move',
snap: '#s5',
stop: handleDragStop
});
}
function handleDragStop(event, ui) {
var offsetXPos = parseInt(ui.offset.left);
var offsetYPos = parseInt(ui.offset.top);
alert("Drag stopped!\n\nOffset: (" + offsetXPos + ", " + offsetYPos + ")\n");
}
</script>
</head>
<body>
<form id="TagForm" runat="server">
<center style="padding-top:20px">
<div id="s5">
<div style="width:500px; height:500px; border:10px soild #ffffff;">
<div id="div1"><img src="../CoverImage.jpg" width="500" height="650"` alt="Product1"/></div>
</div>
<div style="width:500px; height:500px; border:10px soild #ffffff;background-color:Aqua;">
<div id="div2" style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
</div>
<div id="div3" style="width:500px; height:500px; border:10px soild #ffffff; background-color:Silver;">
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id</div>
<div style="padding-left:100px; float:left;"><img class="movable" src="../1.png" width="70" height="70" alt="Product1"/></div>
<div style="padding-left:200px;">Product Details <br /> Product name<br /> Product Id </div>
</div>
</div>
<div class="nav1" style="padding-top:10px">
<center> <asp:Button ID="prev1" runat="server" Text="Prev" Width="70px" />
<asp:Button ID="next1" runat="server" Text="Next" Width="71px" /></center>
</div>
<input type = "text" id = "txtPage" />
<input type = "button" id = "btnPage" value = "Go" />
<div id="nav">
<%--<asp:Button ID="first1" runat="server" Text="First" />
<asp:Button ID="last1" runat="server" Text="Last" />--%>
</div>
<%-- <div id="nav">
<input type="text" name="inputbox" OnBlur="validate(this.form)" />
<input type="button" name="button" Value="Click" onClick="testResults(this.form)" />
</div>--%>
</center>
</form>
</body>
</html>
Link:- http://jquery.malsup.com/cycle/nowrap.html
