CSS translate(remodel) -100% strikes greater than 100%

I am constructing a slider that has objects. Arrow clicks change the slider index which in flip strikes the objects.

At slider-index 0 issues look high-quality:

With a couple of clicks, it begins getting bizarre.

On the finish of the road, its fully out.

Container has slider plus two arrows. Slider has slider objects. Every slider merchandise has the picture plus different objects.

Here is my CSS:

.container {
  show: flex;
  justify-content: middle;
  min-height: 25%;
}
.slider {
  margin: 0 1% 0 1%;
  --items-per-screen: 4;
  --slider-index: 0;
  show: flex;
  overflow:hidden;
}
.slider-item{
  flex: 0 0 25%;
  remodel: translateX(calc(var(--slider-index) * -100%));
  transition: remodel 250ms ease-in-out;  
}
.deal with{
  flex: 0 0 5%;
  z-index: 10;
  margin: 0;
}

Browser: Safari 14.1.2