Show when slide is active - Slider Swiper

Question

I want to add unique paragraph above each slide when each slide is active. For some reason my jQuery is not working. So this is HTML:

 <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide first" style="background-image:url(/wp-content/uploads/2016/06/MyProfilePreview.png);"></div>
      <div class="swiper-slide" id="secondSlide" style="background-image:url(/wp-content/uploads/2016/06/Browse-Match-screenUpdated.png);"></div>
      <div class="swiper-slide" id="thirdSlide" style="background-image:url(/wp-content/uploads/2016/06/MatchProfile.png);"></div>
      <div class="swiper-slide" id="fourthSlide" style="background-image:url(/wp-content/uploads/2016/06/MessagePage.png);"></div>
      <div class="swiper-slide last" style="background-image:url(/wp-content/uploads/2016/06/ChatFam.png);"></div>
    </div>
</div>
</div>

Above that i have paragraphs like this:

 <p class="sliderTitlepopUp block"> UNIQUE IN-DEPTH PROFILES </p>
          <p class="sliderTitlepopUp block1"> UNIQUE IN-DEPTH PROFILES 1 </p>
           <p class="sliderTitlepopUp block2"> UNIQUE IN-DEPTH PROFILES  2 </p>
            <p class="sliderTitlepopUp block3"> UNIQUE IN-DEPTH PROFILES 3 </p>
              <p class="sliderTitlepopUp block4"> UNIQUE IN-DEPTH PROFILES 4 </p>
                <p class="sliderTitlepopUp block5"> UNIQUE IN-DEPTH PROFILES 5 </p>

And I'm trying different jQuery, but one of approaches is:

 $(document).ready(function() {if($(".swiper-slide.first").hasClass('swiper-slide-active')){$("p.sliderTitlepopUp.block").css('display','inline-table'); else{ $("p.sliderTitlepopUp.block").css('display','none');}

});

Answer 1

I can't add a comment, so i'll add as answer. Try using attrchange from meetselva:

$([selector]).attrchange({
  trackValues: true, 
  callback: function (event) {
    //event.attributeName - Attribute Name
    //event.oldValue - Prev Value
    //event.newValue - New Value
  }
});

You can see the example I did

$(document).ready(function() {
  $(".horizontal .swiper-wrapper .swiper-slide").attrchange({
    trackValues: true,
    callback: function(event) {
      console.log($(".swiper-slide-active").html());
    }
  });
});

html,
body {
  position: relative;
  height: 100%;
}
body {
  background: #eee;
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #000;
  margin: 0;
  padding: 0;
}
.swiper-container {
  width: 100%;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}
.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/meetselva/attrchange/master/js/attrchange.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css" rel="stylesheet" />
<div class="swiper-container horizontal">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
    <div class="swiper-slide">Slide 6</div>
    <div class="swiper-slide">Slide 7</div>
    <div class="swiper-slide">Slide 8</div>
    <div class="swiper-slide">Slide 9</div>
    <div class="swiper-slide">Slide 10</div>
  </div>
  <!-- Add Pagination -->
  <div class="swiper-pagination horizontal"></div>
</div>

<!-- Swiper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/js/swiper.min.js"></script>

<!-- Initialize Swiper -->
<script>
  var swiper = new Swiper('.swiper-container.horizontal', {
    pagination: '.swiper-pagination.horizontal',
    direction: 'horizontal',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30,
    mousewheelControl: true
  });
</script>
<script>
  var swiper = new Swiper('.swiper-container.vertical', {
    pagination: '.swiper-pagination',
    direction: 'vertical',
    slidesPerView: 1,
    paginationClickable: true,
    spaceBetween: 30,
    mousewheelControl: true
  });
</script>