Won't go next if the last slide is partially visible

[sntran]

Steps to Reproduce

For all purposes, below is the example from the homepage, with a slight modification for the 7th and 8th slides to have width of 75% instead of 25% like others.

<ul class="slider ">
  <li>Slide 1</li>
  <li>Slide 2</li>
  <li>Slide 3</li>
  <li>Slide 4</li>
  <li>Slide 5</li>
  <li>Slide 6</li>
  <li>Slide 7</li>
  <li>Slide 8</li>
</ul>

.slider {
  display: flex;
}

.slider > * {
  width: 25%;
  flex: 0 0 auto;
}

.slide > *:nth-child(7),
.slide > *:nth-child(8) {
  width: 75%;
}

const slider = new A11YSlider(document.querySelector(".slider"));

Actual

Once I arrive at slide 7, I can't no longer go to slide 8. Slide 8 is now partially visible, and there is no way to make it fully visible.

Expected

I should be able to go next one more time so that the right edge of slide 8 touch the right edge of the slider.