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