Navigation skipping partial slides

[rachaelCasperParallax]

I have several sliders on my page where you can see the slides as they go off the page , so you can see a partial of a slide off to the right. When I click next or previous buttons it is counting the partial slide as already visible so it skips to the slide after it. This means you can never full see the partial slide.

Any idea what I am doing wrong?

The slides have a fixed width of 416px apart form on mobile where they are 100%. The same thing happens regardless of how many slides are shown on screen, it always skips the partial slide. The partial slide gets the swiper-slide-next class added to it.

Screen shot and js below. There are 4 slides and clicking next jumps to slide 3

`

const swiper = new Swiper(carousel, {
  modules: [Navigation, Pagination],
  loop: false,
  slidesPerView: "auto",
  direction: "horizontal",
  observer: true,
  observeParents: true,
  parallax: true,
  pagination: {
    el: ".swiper-pagination",
    type: "fraction",
  },
  navigation: {
    nextEl: ".swiper-button-next",
    prevEl: ".swiper-button-prev",
  },
});

`

[0Chan-smc]

I think Cards Effect has the same problem.

[0Chan-smc]

Oh, I think I found the answer, you can set this option to true.

preventInteractionOnTransition: true