Question

我希望在每张幻灯片处于活动状态时在每张幻灯片上方添加唯一的段落。出于某种原因，我的jQuery无法正常工作。所以这是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>

上面我有这样的段落：

 <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，但其中一种方法是：

 $(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
  }
});

你可以看到我做的例子

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

幻灯片处于活动状态时显示 - 滑块Swiper

1 个答案: