title: Issue in moving images in a slider left and right
body: <p>I have written a content slider code and I am able to slide the content from right to left upon a click properly.</p>
  
  <p>However, if I have to slide the content from left to right, I have to click twice on left arrow button for the first time after that sliding left to right works with a single click.</p>
  
  <p>Also, once I start sliding the content left to right, if I have to slide content from right to left, I have to double click the right arrow button twice for the first time. </p>
  
  <p>Below is the code.</p>
  
  <p>
  </p>
  
  <pre><code>&lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;link rel="stylesheet" type="text/css" href="css/style.css" /&gt;
  &lt;script type="text/javascript" src="js/jquery-1.8.1.min.js"&gt;
  
  &lt;/script&gt;
  &lt;script type="text/javascript" src="js/jquery.easing.1.3.js"&gt;
  
  &lt;/script&gt;
  &lt;!--script type="text/javascript" src="js/slidR.js"&gt; &lt;/script--&gt;
  
  &lt;body&gt;
      &lt;div id="sliderBlock"&gt;
          &lt;div id="slide1" class="slide"&gt;
              &lt;img src="img/nmo.jpg" /&gt;
          &lt;/div&gt;
          &lt;div id="slide2" class="slide"&gt;
              &lt;img src="img/tys.jpg" /&gt;
          &lt;/div&gt;
          &lt;div id="slide3" class="slide"&gt;
              &lt;img src="img/ups.jpg" /&gt;
          &lt;/div&gt;
          &lt;div id="slide4" class="slide"&gt;
              &lt;img src="img/we.jpg" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;script&gt;
      $(function () {
          var count = $("#sliderBlock").children().length;
          var slideWidth = $(".slide").outerWidth();
          var slideHeight = $(".slide").outerHeight();
          var totalWidth = count * slideWidth;
          var easeFn = "swing";
          var fs = 1;
          var ls = count;
          var currentSlide;
          $("#sliderBlock").append("&lt;div id='next'&gt;&lt;/div&gt;")
          $("#sliderBlock").append("&lt;div id='prev'&gt;&lt;/div&gt;")
          $(".slide").wrapAll('&lt;div id="allSlides"&gt;');
          $("#allSlides").css({
              "width": totalWidth,
              "height": slideHeight
          });
          $("#sliderBlock").append("&lt;ul id='pagination'&gt;");
          for (i = 1; i &lt;= count; i++) {
              $("#pagination").append("&lt;li&gt;&lt;a id='slide" + i + "'&gt;" + i + "&lt;/a&gt;&lt;/li&gt;")
          }
          $("#pagination li a#slide1").addClass("liveSlide");
          var interval = 3000;
          var timeInterval = setInterval(function () {
              slidR()
          }, interval);
          $("#prev").on("click", slidR_L)
          $("#next").on("click", slidR_R)
  
          function slidR() {
  
              //  slidR_R();
              //  slidR_L();
  
          }
          var curSlide, curSlideNo, prevSlideNo, divReOrder;
          divReOrder = 1;
  
          function slidR_R() {
  
              $("#allSlides").animate({
                  left: -slideWidth
              }, 1000, function () {
                  $(".slide:first-child").clone().appendTo("#allSlides");
                  $(".slide:first-child").detach();
                  $("#allSlides").css('left', "0px");
              });
  
          }
  
          function slidR_L() {
  
              $("#allSlides").animate({
                  left: "0"
              }, 1000, function () {
  
                  $(".slide:last-child").clone().prependTo("#allSlides");
                  $(".slide:last-child").detach();
                  $("#allSlides").css('left', -slideWidth);
              });
  
          }
      });
  &lt;/script&gt;
  </code></pre>
  
  <p></p>