title: unable to move the list items in the carousel when buttons are clicked
body: <p>I am trying to create a simple carousel without using any plugins in jquery and javascript. My problem is that the viewport does not show the next or previous list items on clicking the appropriate buttons. My code is:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;body onload='createList()'&gt;
          &lt;div id="carouse"&gt;
              &lt;button id='btn-prev' onclick='showPrev()'&gt;&lt;img src="orange-towards-left.png"&gt;&lt;/button&gt;
              &lt;div id="viewport"&gt;
                  &lt;ul id="items"&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
              &lt;button id='btn-next' onclick='showNext()'&gt;&lt;img src="orange-towards-right.png"&gt;&lt;/button&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>function createList(){
                  var html="";
                  for(var i=0;i&lt;6;i++){
                      html += "&lt;li&gt; Content " + (i+1) + "&lt;/li&gt;";
                  }
                  document.getElementById('items').innerHTML = html;
              }
  
              function showNext(){
                  var $curr = $('#items li.current');
                  console.log('Current Index :: ', $curr.index());
                  $('#viewport ul').animate({right: '240px'},1000,function(){
                      $curr.find("li:last").after($curr.find("li:first"));
                          //$(this).css({marginLeft:0});
                  });
                   console.log('Current Index (after):: ', $curr.index());
              }
  
              function showPrev(){
                  var $curr = $('#items li.current');
  
                  $('#viewport ul').animate({right:'240px'},1000,function(){
                      $curr.find("li:last").before($(this).find("li:first"));
                      //$(this).css({marginLeft:0});
                  }); 
              }
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#carouse{
                  display: inline-flex;
                  /*visibility: hidden;*/
              }
  
              #viewport{
                  display:block;
                  width: 240px;
                  height: 125px;
                  position: relative; 
                  overflow: hidden; 
  
              }
  
              #items{
                  list-style: none;
                  position: absolute; 
                  padding: 0; 
                  margin: 0; 
                  width: 240px; 
                  left: 0; 
                  top: 0; 
                  overflow: hidden; 
                  list-style-type: none;
                  float:left;
              }
  
              #items li{
                  float: left; 
                  margin: 0 20px 0 0; 
                  padding: 1px; 
                  height: 121px; 
                  border: 1px solid #dcdcdc; 
                  width: 236px; 
              }
  
              #btn-prev, #btn-next{
                    background: none;
                    border: 0px;
                    width: 30px;
                    height: 38px;
                    margin-top: 30px;
              }
  
              #btn-next img{
                  width: 8px;
                  height: 15px;
              }
  
              #btn-prev img{
                  width: 8px;
                  height: 15px;
              }
  </code></pre>
  
  <p>I don't know where the mistake is. I am trying this for the first time. Any help is appreciated. I apologize if I have repeated a question asked before.</p>