Slides - getActiveIndex() doesn't work

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">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script defer src=""></script>
  <link rel="stylesheet" href=""/>

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

    :root {
      --ion-safe-area-top: 20px;
      --ion-safe-area-bottom: 22px;
    <ion-content fullscreen class="ion-padding" scroll-y="false">

          <div class="slide">
            <img src=""/>
            <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>

          <img src=""/>
          <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>

          <img src=""/>
          <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>

          <img src=""/>
          <h2>Ready to Play?</h2>
          <ion-button fill="clear">Continue <ion-icon slot="end" name="arrow-forward"></ion-icon></ion-button>


    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);