I am creating a simple online store in Angular, which I want to have Products scrollable horizontally with touch.
Looking something similar to the website https://82e.com/ (check in mobile view)

Here is where i am so far on the coding and I know I am missing the coding in TS or Javascript

.container {
  position: relative;
  width: 100%;
  overflow-x: scroll;
  white-space: nowrap;
}

.scrollable-content {
  display: inline-block;
  white-space: nowrap;
}

.item {
  display: inline-block; 
  width: 275px; 
  height: 415px; 
  position: relative;
}

HTML

<div class="container" #widgetsContent>
  <div class="scrollable-content">
    @for(p of products; track p){
    <div class="item1" appDraggable>
      <div class="content-container">
        <div class="name">{{ p.name }}</div>
        <div>
          <button mat-flat-button class="button-add">ADD TO CART</button>
        </div>
      </div>
    </div>
    }
  </div>
</div>