CSS3 解决swiper轮播图在fade效果下无法点击内部元素问题

又是写轮播图时遇到的问题，这次想要实现的淡入淡出效果的轮播图

轮播图基本配置代码如下：

new Swiper(".swiper-container_2", {spaceBetween: 30,effect: "fade",//定义淡入淡出效果mousewheel: true,// preventClicks: false,  //   也可以加上，但不是解决问题的关键speed: 300,fadeEffect: {crossFade: true},simulateTouch: false, //禁止鼠标模拟direction: "vertical",pagination: {el: ".swiper-pagination",clickable: true}
});

问题表现

我在轮播图的每一页都定义了一个可以跳转的a标签，但是发现点不动它，或者是一直点总有点的动的时候，连鼠标都没变成手指的样子，就很玄幻，开审查元素也没发现有被什么东西遮挡。

问题解决

从两个方面解决

一是修改slide的pointer-events属性为auto

pointer-event属性 指定在什么情况下元素可以成为鼠标事件的target

pointer-events属性有很多值，但是对于浏览器来说，只有auto和none两个值可用，其它的几个是针对SVG的（本身这个属性就来自于SVG技术）。

• 属性值none
  元素永远不会成为鼠标事件的target（目标）。但当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。实际上默认就可以穿透当前层，因为pointer-events默认为auto。

• 属性值auto
  效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

.swiper-container_2 .swiper-slide {width: 100%;height: 100%;pointer-events: auto; ///这个
}

二是修改slide的z-index属性

设为fade效果的轮播图看审查元素可以知道每个slide之间切换的时候只是改变了opacity透明度，所以我们看到的slide可能是上面还有多张设为透明的slide，虽然看不见但还是可以点击触发其中的元素，使得我们其实是点击不到我们想要的slide中的元素

可以通过改变当前展示的slide的z-index属性来实现我们看到的就是最上层的slide

//gIndex -- 当前轮播页码 我自己定义的 表示当前是哪页 哪页的slide的z-index属性就为2000
:style="{ zIndex: gIndex == item.id ? 2000 : -1 ,opacity:gIndex == item.id?1:0}"