Slides - getActiveIndex() doesn't work

Ionic Framework
1

Hi guys!

I’m trying to run getActiveIndex() of slides just like the code below. But it doesn’t work.

The error is: index.html:13 Uncaught (in promise) TypeError: Cannot read property 'getActiveIndex' of null

Could you help me to solve this problem?

Thank you!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Slides</title>
  <script defer src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core/css/ionic.bundle.css"/>

  <script defer>
    (async () => {
        const slides = document.querySelector('ion-slides');
        const activeIndex = await slides.getActiveIndex();

        console.log(activeIndex);
    })()
  </script>
  
  <style>
    :root {
      --ion-safe-area-top: 20px;
      --ion-safe-area-bottom: 22px;
    }
  </style>
</head>
<body>
  <ion-app>
    <ion-content fullscreen class="ion-padding" scroll-y="false">
      <ion-slides>

        <ion-slide>
          <div class="slide">
            <img src="https://picsum.photos/200/300"/>
            <h2>Welcome</h2>
            <p>The <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a demonstration of proper code use.</p>
          </div>
        </ion-slide>

        <ion-slide>
          <img src="https://picsum.photos/200/300"/>
          <h2>What is Ionic?</h2>
          <p><b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.</p>
        </ion-slide>

        <ion-slide>
          <img src="https://picsum.photos/200/300"/>
          <h2>What is Appflow?</h2>
          <p><b>Appflow</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.</p>
        </ion-slide>

        <ion-slide>
          <img src="https://picsum.photos/200/300"/>
          <h2>Ready to Play?</h2>
          <ion-button fill="clear">Continue <ion-icon slot="end" name="arrow-forward"></ion-icon></ion-button>
        </ion-slide>

      </ion-slides>
    </ion-content>
  </ion-app>

  <style>
    ion-slides {
      height: 100%;
    }

    .swiper-slide {
      display: block;
    }

    .swiper-slide h2 {
      margin-top: 2.8rem;
    }

    .swiper-slide img {
      max-height: 50%;
      max-width: 80%;
      margin: 60px 0 40px;
      pointer-events: none;
    }

    b {
      font-weight: 500;
    }

    p {
      padding: 0 40px;
      font-size: 14px;
      line-height: 1.5;
      color: var(--ion-color-step-600, #60646b);
    }

    p b {
      color: var(--ion-text-color, #000000);
    }
  </style>
</body>
</html>