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

Question

我是Swiker的新手.js，我有一个全屏的英雄部分，充当背景滑块。在这个英雄部分的中间，我有另一个需要用文本显示一些SVG。英雄刷卡器不是问题。问题是这个SVG刷卡器将SVG堆叠在一起，使一团糟。swiperswiper

SVG 滑动器的启动方式如下：

这是最后一张幻灯片显示时的样子：

然后它清理干净，并开始再次将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有一个选项可以启用交叉淡入淡出，这是您正在寻找的行为。在“文本”滑块上添加选项：fadeEffectvar textswiper = new Swiper('.textslider', {&nbsp; spaceBetween: 30,&nbsp; effect: 'fade',&nbsp; fadeEffect: { // Add this&nbsp; &nbsp; crossFade: true,&nbsp; }&nbsp; speed: 2000,&nbsp; autoplay: {&nbsp; &nbsp; delay: 4000,&nbsp; &nbsp; disableOnInteraction: false,&nbsp; },});