title: How to implement carousel display of data with Javascript and Css
body: <p>I am currently implementing a <strong>carousel</strong>, holding sets of metrics. </p>
  
  <p>The next slides (data set) are implemented to be hidden beyond the border, so that carousel movement can occur by moving the next hidden data set into the visible area. 
  The width of each data set is modified based on the number of  elements (data sets).
  Below links to what I have so far:
  <a href="https://jsfiddle.net/chouchua/b94gc1rr/" rel="nofollow">https://jsfiddle.net/chouchua/b94gc1rr/</a></p>
  
  <p>Snippet of code to set width of carousel contents:</p>
  
  <pre><code>function setWidth(){
    var ulMetrics = $('ul');
    console.log('number of datametrics:');
    var metricLength = ulMetrics.length;
    var containerLength = metricLength + "00%";
    console.log(containerLength);
    var dataLength= (100/metricLength - 5) + "00%";
    console.log('dataset width is: '.concat(dataLength));
    if(metricLength){
      //set width of data container
      $('.data_container').css("width", containerLength);
      //set width of data sets
      $('.metric').css("width", dataLength);
    }
  
  }
  </code></pre>
  
  <p>Please suggest best ways to move to the next slide with sliding effect, in consideration of calculating new position and checking whether there exists a next set of data. Note that the current movement implementation does not support multiple clicks, please give suggestions as well.</p>
  
  <p>I would prefer a javascript solution, but jquery solutions works too.</p>
  
  <p>Thanks so much.</p>