Как в swiper slide сделать активную ссылку только для активного слайда?

Question

[Cheizer]

Друзья, подскажите, пожалуйста, как сделать ссылку активной, только в активном слайде? И во всех остальных, спрятать ее?

Делаю так

<!-- Swiper -->
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><h1 class="title"><a href="https://www.google.ru/" target="_blank">link</a><br>Slide 1</h1></div>
      <div class="swiper-slide"><h1 class="title"><a href="https://www.google.ru/" target="_blank">link</a><br>Slide 2</div>
      <div class="swiper-slide"><h1 class="title"><a href="https://www.google.ru/">link</a><br>Slide 3</h1></div>
      <div class="swiper-slide"><h1 class="title"><a href="https://www.google.ru/" target="_blank">link</a><br>Slide 4</h1></div>
      <div class="swiper-slide"><h1 class="title"><a href="https://www.google.ru/" target="_blank">link</a><br>Slide 5</h1></div>
    </div>

    <!-- Add Arrows -->
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
  </div>
    <!-- Add Pagination -->
    <div class="swiper-pagination"></div>

js

var s6 = new Swiper('.swiper-container', {
       spaceBetween: 10,
        slidesPerView: 'auto',
        slideToClickedSlide: true,
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      pagination: {
    el: '.swiper-pagination',
    type: 'bullets',
         clickable: true,
  }, 
});

var el = $('.swiper-container .swiper-slide');

 $(el).each(function(i,el) {
if($(this).activeIndex){
$('a').show();
}else{
$('a').hide();
}
 });

Вот поднял пример живой https://codepen.io/Cheizer/pen/OJLWREZ

Но так не работает, ссылки все скрываются, судя по IPA есть activeIndex активеный слайд, но что то не так делаю.
https://idangero.us/swiper/api/

Что не так?

Answer 1

[Cheizer]

решение

const swiperSlides = document.getElementsByClassName('swiper-slide');

s6.on('slideChange', function() {
  const otherSlides = swiperSlides
  for (let index = 0; index < swiperSlides.length; index++) {
    const element = swiperSlides[index];
    element.getElementsByTagName('a')[0].style.display = 'none'
  }

  const linkElemCurrentSlide = swiperSlides[s6.realIndex].getElementsByTagName('a')
  linkElemCurrentSlide[0].style.display = 'block'
});

Answer 2

[VeryLongAgoDid]

Ну так функция написана, а вызываете вы её когда?

var swiper = new Swiper('.swiper-container', {
  init: false,
  // other parameters
})
swiper.on('slideChange', function() { /* Тут творите. Событие будет запущено при изменении текущего активного слайда */ });

swiper.init();

Кстати если обращаться к активному слайду

var elActive = $('.swiper-container .swiper-slide.active');

то будет один единственный и верный.
И ещё это всё можно теперь оформить через css, ведь именно для такого он и задуман. Js нужен для вещей посложнее

Comments

[Cheizer]

Сделал так как вы говорите, все равно все ссылки скрыты.