Показывать, когда слайд активен — Slider Swiper

Я хочу добавить уникальный абзац над каждым слайдом, когда каждый слайд активен. По какой-то причине мой 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');}

});


slider jquery swiper
person Nanina    schedule 06.07.2016    source источник
comment
Насколько активен слайд? после щелчка мыши или мыши или после временного интервала? Пожалуйста, дайте более подробную информацию и покажите часть javascipt, отвечающую за скольжение.   -  person Adib Aroui    schedule 07.07.2016
comment
Установите интервал на 2000. Таким образом, на 2 секунды он скользит, добавляя этот класс активным...   -  person Nanina    schedule 07.07.2016
comment
у вас нет закрытия } перед частью else в коде jquery.   -  person Garvit Mangal    schedule 07.07.2016
comment
Каков код этого поведения, пожалуйста. Я думаю, что указанная вами логика должна быть помещена внутри обратного вызова где-то не только в блоке $(document).ready. Ваш оператор if else должен выполняться, КОГДА что-то происходит   -  person Adib Aroui    schedule 07.07.2016
comment
Мой путь был таким: если слайд 1, скажем, имеет активный класс, чем показать или скрыть абзац...   -  person Nanina    schedule 07.07.2016
comment
Вы правы, функция обратного вызова должна работать. Это то, что я пробовал, но оно ломается: onSlideChangeStart: function(swiperHere){ titleSwap(); вар swiperSlide = swiper.activeSlide() console.log(swiperSlide); } }); function titleSwap(){ if($(.swiper-slide.first).hasClass(swiper-slide-active)) { alert('Show'); }else{ предупреждение('Скрыть'); } };   -  person Nanina    schedule 07.07.2016

Ответы (1)


arrow_upward
1
arrow_downward

Я не могу добавить комментарий, поэтому я добавлю как ответ. Попробуйте использовать attrchange из meetselva:

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

person Paulo Roberto Dalmas Junior    schedule 07.07.2016