слайдер на scroll-snap

Всем привет. Создаю горизонтальный слайдер на scroll snap в основном для свайпа на сенсорных устройствах.

Все отлично листается влево и вправо, но под слайдером есть индикаторы( например в виде кружков).

Может кто подскажет, как связать эти индикаторы со свайпом, т.е. первая картинка активная в данный момент, соответственно первый кружок активный (например синего цвета), при свайпе вправо ко второй картинке, второй кружок должен становиться синим (указывает, что активная в данный момент вторая картинка).

Может как-то можно сделать так, чтобы при свайпе как-то отлавливать этот свайп и менять стиль этих кружков. А то в мануале по scroll-snap не нашел ничего. Спасибо.

Вот например три элемента в слайдере:

<div class="carousel">
    <div id="x">x</div>
    <div id="y">y</div>
    <div id="z">z</div>
</div>

CSS:

.carousel > * {
  display: inline-block;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  width: 100vw;
  height: 100vh;
}

#x {
  background-color: pink;
}
#y {
  background-color: lightcyan;
}
#z {
  background-color: lightgray;
}

И есть 3 label'а для стилизации в виде кружков:

  <label for="switch1"></label>
  <label for="switch2"></label>
  <label for="switch3"></label>

Так вот на примерах построения слайдера на чистом CSS эти label'ы связывают с radiobuttons и таким образом при

<b>клике</b>

на кружок происходит смена картинки и изменение стиля кружка. А вот при свайпе это не отслеживается.

.carousel {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100vw;
  white-space: nowrap;
  overflow-x: scroll;
}

.carousel>* {
  display: inline-block;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  width: 100vw;
  height: 100vh;
}

#x {
  background-color: pink;
}

#y {
  background-color: lightcyan;
}

#z {
  background-color: lightgray;
}

<div class="carousel">
  <div id="x">x</div>
  <div id="y">y</div>
  <div id="z">z</div>
</div>