swipe scroll snap only one section for every swipe and regardless of swipe speed

Question

I have a horizontal scroll container on which I apply CSS scroll-snap properties. However, when I quickly swipe right it is possible to skip from the first section directly to the third, without stopping at the second section.

Is there a way to swipe only one section for every swipe, regardless of swipe speed?

.slider {
  border: 4px solid black;
  width: 300px;
  height: 200px;
  overflow: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(10, 100%);
  scroll-snap-type: both mandatory;
}

.slider::-webkit-scrollbar {
  height: 0;
}

.slds {
  color: black;
  width: 100%;
  height: 100%;
  list-style: none;
  font-size: 30px;
  scroll-snap-align: center;
}

.slds:nth-child(1){background: red;}
.slds:nth-child(2){background: orange;}
.slds:nth-child(3){background: green;}

<div class="slider">
  <div class="slds">1</div>
  <div class="slds">2</div>
  <div class="slds">3</div>
</div>

Answer 1

You can add scroll-snap-stop: always on the child element (your slds).

Your example updated:

.slider {
  border: 4px solid black;
  width: 300px;
  height: 200px;
  overflow: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  grid-template-columns: repeat(10, 100%);
  scroll-snap-type: both mandatory;
}

.slider::-webkit-scrollbar {
  height: 0;
}

.slds {
  color: black;
  width: 100%;
  height: 100%;
  list-style: none;
  font-size: 30px;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

.slds:nth-child(1){background: red;}
.slds:nth-child(2){background: orange;}
.slds:nth-child(3){background: green;}

<div class="slider">
  <div class="slds">1</div>
  <div class="slds">2</div>
  <div class="slds">3</div>
</div>