title: Active Slide in Swiper.js - React
body: <p>I am trying to get a piece of text to appear when the Swiper Slide is active (centered) and then disappear when it is not the center/active slide. I have tried two options, one using the <code>isActive</code> parameter from Swiper and another trying to create my own function using <code>class.contains(&quot;class&quot;)</code>.</p>
  <p>From looking at the classes, the centered slide doesn't actually look like the &quot;Active&quot; slide. This is why I have used <code>swiper-slide-next</code> as the class name in my function as it is the centered slide.</p>
  <pre><code>import React from &quot;react&quot;;
  import styles from &quot;./Carousel.module.scss&quot;;
  import { Swiper, SwiperSlide } from &quot;swiper/react&quot;;
  import &quot;swiper/swiper.scss&quot;;
  import SwiperCore, { Autoplay, Pagination, Navigation } from &quot;swiper&quot;;
  
  const Carousel = () =&gt; {
    SwiperCore.use([Autoplay, Pagination, Navigation]);
  
    const textJsx = () =&gt; {
      const card = document.querySelector(&quot;.productCard&quot;);
      if (card.classList.contains(&quot;swiper-slide-next&quot;)) {
        return &lt;p&gt;i'm center/next&lt;/p&gt;;
      }
      {
        return &lt;p&gt;Shouldnt be here s&lt;/p&gt;;
      }
    };
  
    let cardData = [
      {
        img: &quot;email.svg&quot;,
        title: &quot;email&quot;,
        para: &quot;variable text &quot;,
      },
      {
        img: &quot;facebook.svg&quot;,
        title: &quot;facebook&quot;,
        para: &quot;variable text &quot;,
      },
      {
        img: &quot;instagram.svg&quot;,
        title: &quot;insta&quot;,
        para: &quot;variable text &quot;,
      },
      {
        img: &quot;linkedin.svg&quot;,
        title: &quot;linked&quot;,
        para: &quot;variable text &quot;,
      },
    ];
    return (
      &lt;&gt;
        &lt;Swiper
          autoplay={{
            delay: 3000,
            disableOnInteraction: false,
          }}
          navigation={{
            nextEl: &quot;.swiper-button-next&quot;,
            prevEl: &quot;.swiper-button-prev&quot;,
          }}
          spaceBetween={30}
          autoHeight={true}
          loop={true}
          slidesPerView={1}
          // onSlideChange={() =&gt; console.log(&quot;slide change&quot;)}
          // onSwiper={(swiper) =&gt; console.log(swiper)}
          breakpoints={{
            768: {
              slidesPerView: 2,
              spaceBetween: 40,
            },
            902: {
              slidesPerView: 3,
              spaceBetween: 50,
            },
          }}
        &gt;
          {cardData.map((card) =&gt; {
            return (
              &lt;SwiperSlide key={card.title}&gt;
                &lt;div className={styles.productCard}&gt;
                  &lt;img src={card.img} alt={card.title} /&gt;
                  &lt;h2&gt;{card.title}&lt;/h2&gt;
                  {({ isActive }) =&gt; (
                    &lt;div&gt;
                      Current slide is{&quot; &quot;}
                      {isActive ? &lt;p&gt;{card.para}&lt;/p&gt; : &lt;p&gt;not active&lt;/p&gt;}
                      {textJsx()}
                    &lt;/div&gt;
                  )}
                &lt;/div&gt;
              &lt;/SwiperSlide&gt;
            );
          })}
        &lt;/Swiper&gt;
        &lt;div class=&quot;swiper-button-next&quot;&gt;next arrow&lt;/div&gt;
        &lt;div class=&quot;swiper-button-prev&quot;&gt;prev arrow&lt;/div&gt;
      &lt;/&gt;
    );
  };
  export default Carousel;
  </code></pre>