Infinte scroll slider, make DIV infinite

Question

I want to make my vertical scroll slider infinite; so when you scroll down to the last item and scroll again the first items appears again. The div (id="carousel") has to be infinite.

Basics of my HTML:

<div id="carousel">
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
  <div class="carouselItem" class="snap"></div>
</div>

CSS:

    #carousel {
    overflow-y: auto;
    flex-direction: column;
    width: 100%;
}

#carousel img {
    width: 50%;
    height: 50%;
}

#carousel.snap {
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    height: 100%;
}

#carousel.snap > div {
    scroll-snap-align: center;
}

#carousel.snap {
    scroll-snap-type: mandatory;
    -ms-scroll-snap-type: mandatory;
    scroll-snap-points-y: repeat(50%);
    -ms-scroll-snap-points-x: repeat(50%);
}