sliding divs horizontally using jquery
<p>I am trying to design a slider for my page and I am wondering if anyone knows how to create sliding divs that come from the left to right, and vice versa only when the corresponding button(left &amp; right) is pressed? Can you help?</p>

<p>Here is the code I am trying. I can get the slides to work, but on reaching the ends it still keep sliding right or left continuosly. i want it to stop dynamically once it reaches the ends and on clicking further should alert thru pop up.</p>

<p>can anyone guide me with some example coding</p>

<pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt; Sample Slide&lt;/title&gt;
&lt;style type="text/css"&gt;
.total
{
height:350px;
width:75%;
border:1px solid black;
margin-left:auto;
margin-right:auto;
margin-top:15%;
}
.slidepanel
{
border:1px solid purple;
width:100%;
height:100%;
overflow-x: scroll;
overflow-y: hidden;
}
.box-wrapper 
{
width: 400%;
height: 90%;
overflow: hidden;
}

.block
{
 /* position:absolute;
  background-color:#abc;
  left:50px;
  width:90px;
  height:90px;
  margin:5px;*/
border:1px solid red;
width:24.9%;
height:98%;
float:left;
margin-left:auto;
margin-right:auto;
position:relative;
left:0px;
}
.block:nth-child(odd) {
    background: cyan;
}
.block:nth-child(even) {
    background: red;
}
&lt;/style&gt;
 &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
 &lt;script type="text/javascript" src="jquery.js"&gt; &lt;/script&gt;
&lt;script type="text/javascript"&gt;
 $(document).ready(function() {
$("#sright").click(function(){
  $("#block1,#block2,#block3 ,#block4").animate({"left": "+=24.9%"}, "slow");
   });
});

 $(document).ready(function() {
$("#sleft").click(function(){
  $("#block1,#block2,#block3 ,#block4").animate({"left": "-=24.9%"}, "slow");
});
});

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="total"&gt;
&lt;div class="slidepanel"&gt;
&lt;center&gt;&lt;button id="sleft"&gt;&amp;laquo;&lt;/button&gt; &lt;button id="sright"&gt;&amp;raquo;&lt;/button&gt;&lt;/center&gt;
&lt;div class="box-wrapper"&gt;
&lt;div class="block" id ="block1"&gt;&lt;/div&gt;
&lt;div class="block" id ="block2"&gt;&lt;/div&gt;
&lt;div class="block" id ="block3"&gt;&lt;/div&gt;
&lt;div class="block" id ="block4"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
