슬라이드가 활성 상태 일 때 표시 - 슬라이더 스 와이프

Question

각 슬라이드가 활성화되면 각 슬라이드 위에 고유 한 단락을 추가하고 싶습니다. 어떤 이유로 jQuery가 작동하지 않습니다. 이 같은 단락 내가 한 그 위

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

:

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

내가 다른 jQuery를 시도하고 있지만, 접근 방법 중 하나입니다 그래서이 HTML입니다

$(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

의견을 추가 할 수 없으므로 답변으로 추가하겠습니다. meetselva에서 attrchange를 사용해보십시오 :

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

당신이 볼 수있는 내가

슬라이드가 활성화되어 어떻게

$(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>