Karuzela z datami

Próbuję zrobić karuzelę z datami, która będzie się przewijała np. o jeden lub więcej dni (zależnie od ustalonej zmiennej). Widoczne jest 7 dni i dzisiejszy dzień jest wyświetlany na pozycji zależnie od numeru dnia tygodnia. Udało mi się zrobić przewijanie w prawo ale mam problem z przewijaniem wstecz, wtedy wszystkie daty się zmieniają a chciałbym żeby wcześniejsza data wskoczyła na pierwsze miejsce i się pojawiła po przewinięciu.

export class DatePickerComponent implements OnInit {

  now: Date;
  selectedDate: Date;
  localeString: string = 'en';
  visibleDates: Array<{ date: Date, index:number }> = [];
  subscribedParam = "initial value";

  constructor(private route: ActivatedRoute) {

    this.now = new Date();
    this.selectedDate = this.now;
    this.prepareWeek();
  }

  ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.subscribedParam = params.get("date"); console.log(this.subscribedParam);
    });
  }

  prepareWeek() {
    var weekDaySelected = this.selectedDate.getDay();
    for(let i=1; i <= 9; i++) {
      var weekDay = weekDaySelected - i;
      this.visibleDates[i-1] = {date:  new Date(), index: i-1};
      this.visibleDates[i-1].date.setDate(this.selectedDate.getDate() - weekDay-1);
    };
  }

  slideDate(direction: string) {

    var datesList = document.querySelector('.carousel-list');
    var dateItem = document.querySelector('.date-item');

    var listPosition = parseFloat(window.getComputedStyle(datesList).getPropertyValue("left"));
    var dateItemWidth = parseFloat(window.getComputedStyle(dateItem).getPropertyValue("width"));

    if (direction == 'forward') {
      listPosition = listPosition - dateItemWidth;
    } else {
      listPosition = listPosition + dateItemWidth;
     }

    (datesList as HTMLElement).style.left = (listPosition)+'px';
    var sizeOfList = this.visibleDates.length;

    if (direction == 'forward') {
      this.visibleDates[sizeOfList] = Object.assign({}, this.visibleDates[sizeOfList - 1]);

      this.visibleDates[sizeOfList].date = new Date(this.visibleDates[sizeOfList - 1].date.setDate(this.visibleDates[sizeOfList - 1].date.getDate() + 1));
    } else {
      this.visibleDates.unshift(Object.assign({}, this.visibleDates[0]));
      this.visibleDates[0].date = new Date(this.visibleDates[1].date.setDate(this.visibleDates[1].date.getDate() - 1));
    }

    this.visibleDates[sizeOfList].index = sizeOfList;
    sizeOfList++;
  }

}

<div class="carousel js-carousel">
	<div class="carousel-nav">
		<button class="carousel-button-prev js-carousel-button" (click)="slideDate('backward')" data-dir="prev"><</button>
		</div>
	<div class="carousel-container js-carousel-container">
		<div class="carousel-list js-carousel-list">

			<a class="plan-date date-item js-carousel-item" *ngFor="let item of visibleDates" [ngClass]="{'selectedDate': item.date|date:'MM-dd'=='11-11'}"  [routerLink]="['/todays-plan',item.date|date:'dd-MM-yyyy']" routerLinkActive="router-link-active" >
				{{item.date|date:'MM-dd'}}
			</a>
		</div>
	</div>
	<div class="carousel-nav">
		<button class="carousel-button-next js-carousel-button" (click)="slideDate('forward')" data-dir="next">></button>
	</div>
</div>

.carousel
{
    background-color: #343a40;
    color: #fff;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    margin: 0 auto;
}
.carousel-container
{
    height:40px;
    padding: 2px;
    width: 380px;
    overflow: hidden;
    flex: 1 1 400px;
}

.carousel-list
{
    left: calc(-100%/7);
    box-sizing: border-box;
    width: 100%;
    position: relative;
    white-space: nowrap;
    transition: .5s ease-in-out;
    height: 100%;
}

.date-item
{

    color: #fff;
    width: calc(100%/7);
    display: inline-block;
    border: 1px solid #fff;
    text-align: center;
    background: rgb(52,58,64);
    transition: .1s ease-in-out;
    line-height: 40px;
}

.router-link-active,
.date-item:hover,
.date-item:active
{
    color: #F3C622;
    background: #23212C;
}

.carousel-nav
{
    height:40px;
    padding: 2px;

}

.carousel-button-prev,
.carousel-button-next
{
    background: inherit;
    color: #fff;
    line-height: 100%;
    font-size: 200%;
    height: 100%;
    border: none;
    margin:1px;
    transition: .1 ease-in-out;
}

.carousel-button-prev:hover,
.carousel-button-next:hover,
.carousel-button-prev:active,
.carousel-button-next:active
{
    background: inherit;
    color: #F3C622;

}

Jakieś pomysły jak to rozwiązać aby działało też przesuwanie w lewo ? Może jest już jakaś inna gotowa karuzela którą mógłbym użyć lub przerobić?

Możesz np. manipulować parametrem css order dla klatek z poszczególnymi datami.