Как реализовать карусельное отображение данных с помощью Javascript и Css

Question

В настоящее время я внедряю карусель с набором метрик.

Следующие слайды (набор данных) реализованы так, что они скрыты за границей, поэтому перемещение карусели может происходить путем перемещения следующего скрытого набора данных в видимую область. Ширина каждого набора данных изменяется в зависимости от количества элементов (наборов данных). Ниже ссылки на то, что у меня до сих пор: https://jsfiddle.net/chouchua/b94gc1rr/

Фрагмент кода для установки ширины содержимого карусели:

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);
  }

}

Пожалуйста, предложите лучшие способы перехода к следующему слайду с эффектом скольжения, учитывая расчет новой позиции и проверку наличия следующего набора данных. Обратите внимание, что текущая реализация движения не поддерживает множественные клики, пожалуйста, дайте также предложения.

Я бы предпочел javascript-решение, но jquery-решения тоже работают.

Спасибо.