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

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

Делаю так
<!-- 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/

Что не так?
  • Вопрос задан
  • 19 просмотров
Решения вопроса 1
Cheizer
@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'
});
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@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 нужен для вещей посложнее
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы