javascript - 就像在滑动幻灯片中一样，仅为事件幻灯片创建事件链接？

Question

friend 们，请告诉我如何使链接处于事件状态，仅在事件幻灯片中？并在其他所有人中隐藏她。

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