4 slides pass in one click.

[fatih-tutar]

4 slides pass in one click. I tried almost all parameters. I set all parameters with a value of 4 to 1, and even set all other parameters to 1, but I could not prevent 4 slides from going through in one click. I am waiting for your help.

https://drive.google.com/file/d/1Fd_Eu3uAzU0Flx9H2rWOcZUMR9tSUS_V/view?usp=sharing

import $ from 'jquery';
import Swiper, {
Navigation, Pagination, Thumbs, Autoplay, Lazy,
} from 'swiper';
import './style.scss';
Swiper.use([Navigation, Pagination, Thumbs, Lazy, Autoplay]);
export default () => {
  // thumb swiper
  const spotlightThumbs = new Swiper('.js-spotlight-thumbs', {
    spaceBetween: 0,
    slidesPerView: 3,
    freeMode: false,
    allowTouchMove: false,
    lazy: {
      loadPrevNext: true,
      loadPrevNextAmount: 3,
    },
    grabCursor: true,
    navigation: {
      nextEl: '.js-swiper-button-thumbs-next',
      prevEl: '.js-swiper-button-thumbs-prev',
    },
    breakpoints: {
      992: {
        speed: 1200,
        slidesPerView: 3,
      },
      1201: {
        speed: 1200,
        slidesPerView: 4,
        lazy: {
          loadPrevNext: true,
          loadPrevNextAmount: 4,
        },
      },
      1440: {
        speed: 1200,
        slidesPerView: 5.2,
        lazy: {
          loadPrevNext: true,
          loadPrevNextAmount: 5,
        },
      },
    },
    watchSlidesProgress: true,
  });
  window.spotlightThumbs = spotlightThumbs;
  const spotlightTop = new Swiper('.js-spotlight-top', {
    spaceBetween: 0,
    slidesPerView: 1,
    slidesPerGroup: 1,
    navigation: {
      nextEl: '.js-swiper-button-next',
      prevEl: '.js-swiper-button-prev',
    },
    loop: true,
    thumbs: {
      swiper: spotlightThumbs,
    },
    lazy: {
      loadPrevNext: true,
      loadPrevNextAmount: 2,
    },
    pagination: {
      el: '.js-swiper-pagination',
      clickable: true,
    },
    breakpoints: {
      768: {
        pagination: false,
      },
      992: {
        speed: 1200,
        loop: false,
        pagination: false,
      },
    },
  });
  $(document).on('mouseover', '.js-spotlight-thumb', (e) => {
    spotlightTop.slideTo($(e.currentTarget).index());
  });
  let control = false;
  let timer = null;
  $(document).on('mouseover', '.js-swiper-button-thumbs-next', (e) => {
    if (!control) {
      control = true;
      spotlightTop.slideNext();
      timer = setInterval(() => {
        spotlightTop.slideNext();
      }, 1000);
    }
  });
  $(document).on('mouseover', '.js-swiper-button-thumbs-prev', (e) => {
    if (!control) {
      control = true;
      spotlightTop.slidePrev();
      timer = setInterval(() => {
        spotlightTop.slidePrev();
      }, 1000);
    }
  });
  $(document).on('mouseleave', '.js-swiper-button-thumbs-next, .js-swiper-button-thumbs-prev', (e) => {
    control = false;
    clearInterval(timer);
  });
};