Как установить частицы. js в качестве фона? - PullRequest
Новая
       41

Как установить частицы. js в качестве фона?

0 голосов
/ 08 апреля 2020

Я настраиваю Swiper. js (https://swiperjs.com/) для проекта. Я хотел бы иметь Particles. js от Vincent Garreau (https://github.com/VincentGarreau/particles.js/) в качестве фона этого слайдера. Я знаю, что, наверное, это глупо, но сейчас я действительно застрял.

HTML

<div class="swiper-container">
 <div id="particles-js"></div>
    <div class="swiper-wrapper">
        <div class="swiper-slide slide" style="background-image: url('https://www.gcerti.it/wp-content/uploads/2017/06/city-background.jpg')">
          <h1>Welcome!</h1>
          <a href="#" class="button button-large">Read More</a>
        </div>
        <div class="swiper-slide" style="background-image: url('https://www.gcerti.it/wp-content/uploads/2017/06/city-background.jpg')"></div>
        <div class="swiper-slide" style="background-image: url('https://img5.goodfon.com/wallpaper/nbig/c/d1/gorod-zdaniia-zdanie-krasnyi-fon-minimalizm-oblaka-zakat.jpg')"></div>
    </div>
    <div class="swiper-pagination"></div>

    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>

</div>

* Swiper CSS уже является стандартным, элемент контейнера-swiper имеет относительное положение, поэтому я установил 

#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

В моем файле CSS, но на данный момент я едва вижу частицы в тот момент, когда ползунок меняется, он позади, так что я действительно что-то упускаю в конфигурации z-index, полагаю .

Свиппер-обертка имеет такую ​​конфигурацию 

.swiper-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: flex;
    transition-property: transform;
    box-sizing: content-box;
}

Я думал "хорошо, хорошо, я сдаюсь ... Я собираюсь уменьшить z-индекс swiper -wrapper element ", но проблема в том, что у меня есть призыв к действиям на ползунках, поэтому я должен отказаться от этого ужасного решения lmfao

Кто-нибудь знает, как мне этого добиться? Очень надеюсь, что это не глупость, потому что в этом случае мне действительно нужно сделать перерыв. - '

...