与滑动幻灯片一样，只为活动幻灯片制作活动 link？

Question

朋友，请问如何让link活动，只在活动幻灯片中？在其他所有人中，隐藏她。

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

}

 });

这样做不行:(

Answer 1

您可以在这里做两件事：

CSS 方式

<style>
    .swiper-slide a {
        display:none
    }
    .swiper-slide.swiper-slide-active a {
      display:block
    }

</style>

JS方式

要查找更改的幻灯片，您可以使用以下内容

mySwiper.on('slideChange', function () {
  console.log(mySwiper.realIndex, 'slide changed');
});

此时您所要做的就是更新该幻灯片中的元素并更新其他幻灯片以隐藏 link。例如https://codepen.io/tsvecak/pen/abowYJW

Answer 2

我已经调整了答案，所以它没有隐藏和显示锚标记，而是将当前幻灯片的 tabIndex 值更改为 1。

我的问题是，一旦我制作了轮播循环，它就停止工作了。

解决方案是将 realIndex 更改为 activeIndex。

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].setAttribute("tabIndex", -1);
  }

  const linkElemCurrentSlide = swiperSlides[s6.activeIndex].getElementsByTagName('a')
  linkElemCurrentSlide[0].setAttribute("tabIndex", 1);
});

$('.swiper-slide a').on('click touchstart', function(e) {
 e.preventDefault();
});

    </script>

与滑动幻灯片一样，只为活动幻灯片制作活动 link？

As in swiper slide, make an active link only for the active slide?

javascript

jquery

swiper