title: How to make the controllers of an image slideshow loop?
body: <p>I have a slideshow here on <a href="http://dlistage.businesscatalyst.com" rel="nofollow">http://dlistage.businesscatalyst.com</a> 
  I would like to make the controllers to make a loop i.e display the first item on click when last item is reached.i have already done it for the images but cannot understand how to do with controllers.
  Can some one help me out here please?</p>
  
  <p>my html is like this</p>
  
  <pre><code>    &lt;div class="controller-3"&gt;
  &lt;ul&gt;
  &lt;li class="selected"&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;li&gt;&lt;/li&gt;&lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and my js is like this </p>
  
  <pre><code>function worksCarousel(){
  var totalWorks = $(".wrapper-project ul li").length;
  var ampleWork = $(".project-content").width();
  var ampleTotalWorks = totalWorks*ampleWork;
  $('.wrapper-project ul').css('width',ampleTotalWorks)
  
  var fragment = document.createDocumentFragment(), 
  li = document.createElement('li');
  while (totalWorks--) {
      fragment.appendChild(li.cloneNode(true));
  }
  
  $('.controller-3 ul').append(fragment);
  
  var index3 = 0;
  var pos3 = 1;
  
      var images_li = $(".wrapper-project ul li").toArray(), current_img = 0;
  $(images_li[current_img]).show();
  
  
  $('.controller-3 ul li:first-child').addClass('selected');
  
  $(".controller-3 ul li").click(function(){
      index3 = $(this).index();
      $(".wrapper-project").stop().animate({scrollLeft:ampleWork*index3},'slow');
       $('.controller-3 ul li').removeClass('selected');
      $(this).addClass('selected');
      //alert(ampleitem);
  });
  </code></pre>
  
  <p>my css is </p>
  
  <pre><code>.controller-2, .controller-3 {
      float: right;
      right: 50%;
      position: relative;
      margin: 30px 0 60px;
  }
  .controller-3 {
      margin-top: 0;
  }
  .controller-2 ul, .controller-3 ul {
      padding: 0;
      float: right;
      right: -50%;
      position: relative;
  }
  .controller-2 ul li, .controller-3 ul li {
      list-style: none;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      border: 2px solid #909090;
      background: #fff;
      float: left;
      margin: 0 7px;
      cursor: pointer;
      margin: 35px 0 0 15px;
  }
  .controller-3 ul li {
      border: 2px solid #909090;
  }
  .controller-2 ul li:hover, .controller-3 ul li:hover {
      border: 2px solid #4ad8ed;
      background: #4ad8ed;
  }
  .controller-2 ul li:first-child, .controller-3 ul li:first-child {
      margin-left: 0px;
  }
  .controller-2 ul li:last-child, .controller-3 ul li:last-child {
      margin-right: 0px;
  </code></pre>