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

Я настраиваю Swiper.js (https://swiperjs.com/) в проекте. Я хотел бы использовать Particles.js Винсента Гарро (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>

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

#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", но проблема в том, что у меня есть призыв к действиям на ползунках, поэтому мне нужно отказаться это ужасное решение lmfao

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

0 ответов

Другие вопросы по тегам