bug: Ionic Slides breaking in React when using autoplay or loop

[ThisNameWasTaken]

Bug Report

Ionic version: [x] 5.x

Current behavior: When setting autoplay or loop to true inside the IonSlides' options prop, the slide lose the snapping behaviour while swiping and the bottom pager. This happens (mostly) every other refresh, at least in my case. Here is a video showing the issue https://drive.google.com/file/d/1cv8lTaaszl0YuwZC8VRLcBYNUU4V0bzM/view?usp=sharing

Expected behavior: I would exepect the slides to work fine every time I refresh the page and not lose the pager.

Steps to reproduce:

• start a new ionic tabs react project replaceTab3`'s code with the following snippet

import {
  IonContent,
  IonHeader,
  IonPage,
  IonSlide,
  IonSlides,
  IonTitle,
  IonToolbar,
} from '@ionic/react';
import { useEffect, useState } from 'react';
import { setTimeout } from 'timers';
import ExploreContainer from '../components/ExploreContainer';
import './Tab3.css';

const Tab3: React.FC = () => {
  const slideOpts = {
    initialSlide: 1,
    speed: 400,
    autoplay: true,
    loop: true,
  };

  const slideStyles = {
    height: '75vh',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  };

  return (
    <IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Tab 3</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Tab 3</IonTitle>
          </IonToolbar>
        </IonHeader>

        <IonSlides pager={true} options={slideOpts}>
          <IonSlide>
            <div style={slideStyles}>
              <h2>Slide 1</h2>
            </div>
          </IonSlide>
          <IonSlide>
            <div style={{ height: '75vh' }}>
              <h2>Slide 2</h2>
            </div>
          </IonSlide>
          <IonSlide>
            <div style={{ height: '75vh' }}>
              <h2>Slide 3</h2>
            </div>
          </IonSlide>
        </IonSlides>
      </IonContent>
    </IonPage>
  );
};

export default Tab3;

Related code:

Repo reproducing the issue https://github.com/ThisNameWasTaken/react-slides-test.

Other information: I have encountered this issue since I started using Ionic (v4). A workaround for this problem seems to be updating the options prop some time after the component has mounted. If it is done too soon, it would still not work.

  const [slideOpts, setSlideOpts] = useState({
    autoplay: true,
    loop: true,
  });

  useEffect(() => {
    setTimeout(() => {
      setSlideOpts({
        autoplay: true,
        loop: true,
      });
    }, 200);
  }, []);

Ionic info:

Ionic:

   Ionic CLI       : 6.16.3 (C:\Users\adria\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework : @ionic/react 5.6.9

Capacitor:

   Capacitor CLI      : 3.0.1
   @capacitor/android : not installed
   @capacitor/core    : 3.0.1
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.4.0

System:

   NodeJS : v14.15.4 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.10
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue! With the release of Ionic 6, we made the decision to deprecate ion-slides in favor of using Swiper.js directly.

Moving forward, ion-slides will only receive critical security fixes, and the component will be removed in Ionic 7. As a result, I am going to close this issue.

We have prepared migration guides for each of the 3 JavaScript frameworks we support, so developers can get started migrating right away.

Migration for Angular Migration for React Migration for Vue

We believe this change will lead to a healthier Ionic ecosystem as it frees up resources for the Ionic team to dedicate to other areas of this project while still giving developers options for carousels in their apps. Since ion-slides currently uses Swiper under the hood, the behavior of your carousels should remain the same even after you migrate.

For more information on the reasoning for and benefits of this change, please see the ion-slides documentation.

Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.