时间戳

首页 > 解决方案 > swiper.js SVG 相互堆叠

javascript - swiper.js SVG 相互堆叠

问题描述

我是 Swiper.js 的新手，我有一个全屏显示swiper作为背景滑块的英雄部分。在这个英雄部分的中间，我有另一个swiper需要显示一些带有文本的 SVG。英雄掠夺者不是问题。问题是这个 SVG swiper 将 SVG 堆叠在一起，弄得一团糟。

这是 SVG swiper 的启动方式：

截屏

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

然后它进行清理，并再次开始将 SVG 堆叠在一起。

这是我的 HTML：

 <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>

这是我的 CSS：

.background {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    z-index: -99;
}

.textslider {
    width: 500px;
    height: 500px;
    position: relative;
    z-index: 7;
}

.slide--1 {
    background-image: url(../images/hero/slider-0.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.slide--2 {
    background-image: url(../images/hero/slider-1.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.slide--3 {
    background-image: url(../images/hero/slider-2.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.slide--4 {
    background-image: url(../images/hero/slider-3.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.text--1 {
    background-image: url(../images/bible-verses/verse2.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.text--2 {
    background-image: url(../images/bible-verses/verse1.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.text--3 {
    background-image: url(../images/bible-verses/verse3.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.text--4 {
    background-image: url(../images/bible-verses/verse4.svg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

我究竟做错了什么？

标签： javascripthtmlcsssvgswiper

解决方案

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

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

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

var textswiper = new Swiper('.textslider', {
  spaceBetween: 30,
  effect: 'fade',
  fadeEffect: { // Add this
    crossFade: true,
  }
  speed: 2000,
  autoplay: {
    delay: 4000,
    disableOnInteraction: false,
  },
});

推荐阅读