swiper.js SVG's stacking on top of each other

user_13215921 0
Viewed 1893

I'm new to Swiper.js, I have a full screen swiper for a hero section that acts as a background slider. In the middle of this hero section I have another swiper that needs to display some SVG's with text. The hero swiper isn't the problem. The problem is that this SVG swiper is stacking the SVG's on top of each other, making a complete mess.

This is how the SVG swiper starts:

screenshot

And this is how it looks when the final slide is showing up: screenshot

And then it cleans up, and starts the process of stacking the SVG's on top of each other again.

Here is my 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>

And this is my 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;
}

What am I doing wrong?

swiper.js svg css html javascript
1 Answers

All the SVGs are positioned exactly the same (on top of each other), and since they have transparent backgrounds you're able to see "through" them.

Swiper controls visibility of the slides by adjusting the opacity CSS attribute. In your case, the problem is that the default Swiper effect sets opacity to 1 (i.e. visible) on multiple slides at the same time.

However, Swiper has an option that enables cross fades, which is the behavior you're looking for. Add the fadeEffect option on your "text" slider:

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