User can add slides - how to stay on the same slide?

[Yonisegev]

Hey everyone,
I am using Swiper with React.

I have initially 2 slides (horizontally):
One is showing information about a location.
The second one is a screen where the user can manually search for a location and add them. (it has to be the last slide).
Whenever the user adds a location, the user instantly sees the new slide because I am rendering slides the following way:
Map over all locations and render a reusable slide component for them.
After that render a single slide component for adding locations.

I want the user to stay on the last slide after adding a location even after the slide array changes, how can I achieve that?

Here's a simplified example of what I'm doing:
https://codesandbox.io/p/sandbox/swiper-react-pagination-forked-z37v63?file=%2Fsrc%2FApp.jsx

[Koreanderson]

@Yonisegev

When a user creates a new slide, you could get the index of your new last slide, then call slideTo using that index. As long as there is no transition speed set, it should automatically display the last slide.

Maybe something like...

const lastSlideIndex = swiper.slides.length - 1;
swiper.slideTo(lastSlideIndex);

[siimsams]

There is a good example for core. But no working example for react. I'm also facing the same issue. @Koreanderson your solution looks to be the only one. I wonder if there is some other more performant trick to do this in react.

[siimsams]

I was struggling with the same problem. If somebody is looking for an answer then I've got a working example in this thread. This example uses swiper with virtual module which complicated things further. When programmatically scrolling swiper never gets 'touchend' event so a hack was needed to complete it.

The solution in short:

const simulateTouchEnd = useCallback((el: HTMLElement) => {
    /* 
     * Hack to trigger touch end event which never happens if user 
     * scrolls to the end and does not let go before loading happens.
     */
    document.dispatchEvent(new TouchEvent('touchend', {
      bubbles: true,
      cancelable: true,
      changedTouches: [
        new Touch({
          identifier: 0,
          target: el,
          clientX: 0,
          clientY: 0,
          radiusX: 2.5,
          radiusY: 2.5,
          rotationAngle: 0,
          force: 0
        })
      ]
    }));
  }, []);
  
 // Example of usage
 swiper.slideTo(lastSlideIndex);
 simulateTouchEnd(swiper.el);