Why does the slick slider scroll forward then back?

Question

JavaScript

Why does slick.js, when clicking on the arrows, scroll forward 2 times, then back once, then forward again.
The slider consists of 16 slides.
Only 8 are displayed in the browser at once.
If you set slidesToScroll < 8 slides for scrolling, that is, 2,4,5,6,7, then it behaves as I described above.
If you set 8 slides for scrolling, then everything scrolls normally.
Here is the js code for the slider

$('#js-my-projects-slider').slick({
    dots: false,
    slidesToShow: 8,
    slidesToScroll: 2,
    arrows: true,
    responsive: [{
        breakpoint: 1600,
        settings: {
          slidesToShow: 7
        }
      },
      {
        breakpoint: 1400,
        settings: {
          slidesToShow: 6
        }
      },
      {
        breakpoint: 1200,
        settings: {
          slidesToShow: 5
        }
      },
      {
        breakpoint: 1000,
        settings: {
          slidesToShow: 4
        }
      },
      {
        breakpoint: 700,
        settings: {
          slidesToShow: 3
        }
      },
      {
        breakpoint: 500,
        settings: {
          slidesToShow: 3,
          arrows: false
        }
      }
    ]
  });

Here is the slider itself

AND the html

<div class="my-projects-slider" id="js-my-projects-slider">
    <div class="my-projects-slider__item"><img src="assets/i/projects/2.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/3.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/4.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/5.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/6.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/7.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/8.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/9.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/2.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/3.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/4.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/5.jpg" alt=""></div>
    <div class="my-projects-slider__item"><img src="assets/i/projects/6.jpg" alt=""></div>
</div>

And here is the page of portfolio.webforworld.info
The slider above the title We work throughout Russia
It doesn't reach me why this behavior?
Thanks in advance for the hint.

Answer 1

slidesToShow: 8,
slidesToScroll: 2,

you have 13 pieces, even I don’t understand how to scroll in this case.