滑动器.js SVG的堆叠彼此叠加

Question

我是Swiker的新手.js，我有一个全屏的英雄部分，充当背景滑块。在这个英雄部分的中间，我有另一个需要用文本显示一些SVG。英雄刷卡器不是问题。问题是这个SVG刷卡器将SVG堆叠在一起，使一团糟。swiperswiperSVG 滑动器的启动方式如下：这是最后一张幻灯片显示时的样子：然后它清理干净，并开始再次将SVG堆叠在一起的过程。这是我的网页： <div class="swiper-container textslider">            <div class="swiper-wrapper">                <div class="swiper-slide text--1"></div>                <div class="swiper-slide text--2"></div>                <div class="swiper-slide text--3"></div>                <div class="swiper-slide text--4"></div>            </div>        </div>        <div class="player-bg">            <a href="#" class="player"><span id="player__text">Reproducir <i class="fas fa-play"></i></span></a>        </div>        <div class="swiper-container background">            <div class="swiper-wrapper">                <div class="swiper-slide slide--1"></div>                <div class="swiper-slide slide--2"></div>                <div class="swiper-slide slide--3"></div>                <div class="swiper-slide slide--4"></div>            </div>        </div>    </div>    <script>        var swiper = new Swiper('.swiper-container', {            spaceBetween: 30,            effect: 'fade',            speed: 2000,            autoplay: {                delay: 4000,                disableOnInteraction: false,            },        });        var textswiper = new Swiper('.textslider', {            spaceBetween: 30,            effect: 'fade',            speed: 2000,            autoplay: {                delay: 4000,                disableOnInteraction: false,            },        });    </script>

Answer 1

所有 SVG 的位置都完全相同（彼此叠加），并且由于它们具有透明的背景，因此您可以“看穿”它们。

卷帘通过调整 CSS 属性来控制幻灯片的可见性。在您的情况下，问题在于默认的Swiker效果同时在多张幻灯片上将不透明度设置为1（即可见）。opacity

但是，Swiper有一个选项可以启用交叉淡入淡出，这是您正在寻找的行为。在“文本”滑块上添加选项：fadeEffect

var textswiper = new Swiper('.textslider', {

  spaceBetween: 30,

  effect: 'fade',

  fadeEffect: { // Add this

    crossFade: true,

  }

  speed: 2000,

  autoplay: {

    delay: 4000,

    disableOnInteraction: false,

  },

});