How can i make a carousel like this using css and javascript?

.container-carousel {
  scroll-snap-type: x mandatory;
  display: flex;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  overflow-x: auto;
  width: 90vw;
  margin: auto;
}

.childc {
  scroll-snap-align: start;
  border-right: 1px solid white;
  padding: 1rem;
  text-align: center;
  position: relative;
  min-width: 30vw;
  height: 50vh;
}

.childc p {
padding: 20px;
text-align: left;
}

.childc h1 {
  padding: 20px;
  text-align: left;
  }

.bg-1 {
  background-color: #FFE4C2;
}

.bg-2 {
  background-color: #FFE4C2;
}

.bg-3 {
  background-color: #FFE4C2;
}

.bg-4 {
  background-color: #FFE4C2;
}

.bg-5 {
  background-color: #FFE4C2;
}

.bg-6 {
  background-color: #FFE4C2;
}

 <div class="container-carousel">

<div class="childc bg-1">
  <h1>2011</h1>
  <p>Virksomheden stiftes og beskæftiger 3 ansatte</p>
</div>

<div class="childc bg-2">
  <h1>Item two</h1>
  <p>Vi bliver autoriseret Apple-servicecenter</p>
</div>

<div class="childc bg-3">
  <h1>Item three</h1>
  <p>Vi får den første elev og flytter fra Skippergade til Toftegårdsvej i Frederikshavn her går vi fra 400 til 1400 kvm.</p>
</div>

<div class="childc bg-4">
  <h1>Item four</h1>
  <p>Vi bliver autoriseret Samsung-servicecenter</p>
</div>

<div class="childc bg-5">
  <h1>Item five</h1>
  <p>Vi beskæftiger nu +10 ansatte.</p>
</div>

<div class="childc bg-6">
  <h1>Item six</h1>
  <p>Vi ISO certificeres ISO27001 & ISO14001./p>
</div>

                      </div>