slider fix

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/animate.min.css" />
    <link rel="stylesheet" href="swiper-bundle.min.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="swiper-bundle.min.js"></script>
    <style>
      .swiper-slide {
        box-sizing: border-box;
        padding: 10% 10% 20% 10%;
        font-size: 18px;
        background: #fff;
      }

      .hidden {
        visibility: hidden;
      }
    </style>
  </head>
  <body>
    <!-- Slider main container -->
    <div class="swiper-container">
      <!-- Additional required wrapper -->
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <h2>Titolo</h2>
          <p>Testo di prova</p>
        </div>

        <div class="swiper-slide">
          <h2>Titolo</h2>
          <p>Testo di prova</p>
        </div>

        <div class="swiper-slide">
          <h2>Titolo</h2>
          <p class="paragrafo">Testo di prova</p>
        </div>
      </div>

      <div class="swiper-pagination"></div>
      <!-- If we need pagination -->
      <div class="swiper-button-prev"></div>
      <!-- If we need navigation buttons -->
      <div class="swiper-button-next"></div>
      <!-- If we need navigation buttons -->
      <!--<div class="swiper-scrollbar"></div>--><!-- If we need scrollbar -->
    </div>
    <script>
      const swiper = new Swiper(".swiper-container", {
        // Optional parameters
        //direction: 'vertical',
        autoplay: { delay: 5000 },
        loop: true,

        // If we need pagination
        pagination: { el: ".swiper-pagination", clickable: true },

        // Navigation arrows
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },

        // And if we need scrollbar
        //scrollbar: {el: '.swiper-scrollbar',},
      });

      swiper.on("init", function () {});
      swiper.on("slideChangeTransitionEnd", () => {
        $(".swiper-slide")
          .not("swiper-slide-active")
          .find("p")
          .removeClass("animated fadeInUp slow")
          .addClass("hidden");

        $(".swiper-slide-active")
          .find("p")
          .removeClass("hidden")
          .addClass("animated fadeInUp slow");

        $(".swiper-slide-duplicate-active")
          .find("p")
          .addClass("animated fadeInUp slow");
      });
    </script>
  </body>
</html>