title: JavaScript Wrap Around Carousel
body: <p>I am looking for some information from some front end experts on how to go about creating a custom wrap around js carousel gallery. The idea is simple really I have a carousel of images, text, or whatever and when I get to the end I want it to wrap around. I don't want the content to simply fadeIn and out to the next piece of content. This is a gallery of div's currently but suppose it's images or whatever have you.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="outside-container"&gt;
    &lt;div id="inside-container" class="cf"&gt;
       &lt;div class="items" id="item1"&gt;&lt;/div&gt;
       &lt;div class="items" id="item2"&gt;&lt;/div&gt;
       &lt;div class="items" id="item3"&gt;&lt;/div&gt;
       &lt;div class="items" id="item4"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="directions"&gt;
    &lt;h4 id="left-button"&gt;Left&lt;/h4&gt;
    &lt;h4 id="right-button"&gt;Right&lt;/h4&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#outside-container{
    display: block;
    width: 400px;
    height: 125px;
    overflow: hidden;
    border: 1px solid #000;
    margin: 0px auto;
  }
  #inside-container{
    display: block;
    width: 800px;
    overflow: hidden;
    height: 100%;
  }
  
  .items{
    float: left;
    margin: 0px;
    width: 200px;
    height: 100%;
  }
  #item1{ background: green; }
  #item2{ background: red; }
  #item3{ background: blue; }
  #item4{ background: yellow; }
  
  #directions{
    display: block;
    width: 400px;
    margin: 0px auto;
    text-align: center;
  }
  
  #left-button, #right-button{
    display: inline-block;
    cursor: pointer;
    margin: 10px;
  }
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var move = 0;
  $("#left-button").click(function(){
      move += 200;
      $("#inside-container").animate({
        marginLeft: move+"px"
      }, 500);
  });
  
  $("#right-button").click(function(){
  
      move -= 200;
      $("#inside-container").animate({
        marginLeft: move+"px"
      }, 500);
  });
  </code></pre>
  
  <p>Here is the <a href="http://codepen.io/johnstew/pen/aldDK" rel="nofollow">codepen</a>. So to sum all this up. I am asking for a way to create an infite loop for a gallery. I have always programmed these sorts of things to come to an end and then the user has to go back the other way. If this sounds confusing follow check out the codepen. Thanks in advance.</p>