Question

朋友，请告诉我如何使链接处于活动状态，仅在活动幻灯片中？然后把其他人藏起来。

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');
});

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

与滑动幻灯片一样，仅为活动幻灯片建立活动链接？

2 个答案: