与滑动幻灯片一样，仅为活动幻灯片创建活动链接?

Question

朋友们，请告诉我如何使链接处于活动状态，仅在活动幻灯片中？在其他人中，隐藏她。

https://codepen.io/Cheizer/pen/OJLWREZ

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

你可以在这里做两件事：

1. CSS方式

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

2. JS方式

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

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

此时您所要做的就是更新该幻灯片中的元素并更新其他幻灯片以隐藏链接。 例如 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>