引导轮播中的粒子js

Question

这里是我的html5代码。我想在本节中使用粒子js，但我无法弄清楚必须将粒子js代码段放在哪里。我想将粒子放置在轮播背景div和轮播容器div之间，并且只希望加载一次脚本，而不是每个轮播元素都加载该脚本。

我不知道的另一件事是点之间的粒子中的线。有什么方法可以摆脱这些限制？

<section id="intro">

<div id="particles-js"></div>
    <script type="text/javascript" src="particles.js"></script>
    <script type="text/javascript" src="app.js"></script>

        <div class="intro-container">
          <div id="introCarousel" class="carousel  slide carousel-fade" data-ride="carousel">

            <ol class="carousel-indicators"></ol>

            <div class="carousel-inner" role="listbox">

              <div class="carousel-item active">
                <div class="carousel-background"><img src="img/intro-carousel/1.jpg" alt="tartalom" title="Tartalom"></div>
                <div class="carousel-container">
                  <div class="carousel-content">
                    <h2 itemprop="tartalom">#BeContent</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit eligendi doloremque nam veritatis. Magni neque illum rem voluptatum dolorem dolore error harum nulla! Corporis maxime necessitatibus voluptatem illo? Vitae, ad.</p>
                    <a href="#services" class="btn-get-started scrollto">Go</a>
                  </div>
                </div>
              </div>

              <div class="carousel-item">
                <div class="carousel-background"><img src="img/intro-carousel/2.jpg" alt="tartalom" title="Profi"></div>
                <div class="carousel-container">
                  <div class="carousel-content">
                    <h2 itemprop="Profi">A siker</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit eligendi doloremque nam veritatis. Magni neque illum rem voluptatum dolorem dolore error harum nulla! Corporis maxime necessitatibus voluptatem illo? Vitae, ad.</p>
                    <a href="#services" class="btn-get-started scrollto">Go</a>
                  </div>
                </div>
              </div>

              <div class="carousel-item">
                <div class="carousel-background"><img src="img/intro-carousel/3.jpg" alt="Gyorsan" title="Online Marketing"></div>
                <div class="carousel-container">
                  <div class="carousel-content">
                    <h2 itemprop="Online Marketing">Gyorsan</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit eligendi doloremque nam veritatis. Magni neque illum rem voluptatum dolorem dolore error harum nulla! Corporis maxime necessitatibus voluptatem illo? Vitae, ad.</p>
                    <a href="#services" class="btn-get-started scrollto">Go</a>
                  </div>
                </div>
              </div>

              <div class="carousel-item">
                <div class="carousel-background"><img src="img/intro-carousel/4.jpg" alt="Havi" title="Weblap"></div>
                <div class="carousel-container">
                  <div class="carousel-content">
                    <h2 itemprop="Weblap">havi</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit eligendi doloremque nam veritatis. Magni neque illum rem voluptatum dolorem dolore error harum nulla! Corporis maxime necessitatibus voluptatem illo? Vitae, ad.</p>
                    <a href="#services" class="btn-get-started scrollto">Go</a>
                  </div>
                </div>
              </div>

              <div class="carousel-item">
                <div class="carousel-background"><img src="img/intro-carousel/5.jpg" alt="Instagram" title="Instagram"></div>
                <div class="carousel-container">
                  <div class="carousel-content">
                    <h2 itemprop="Instagram">Instagram</h2>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Impedit eligendi doloremque nam veritatis. Magni neque illum rem voluptatum dolorem dolore error harum nulla! Corporis maxime necessitatibus voluptatem illo? Vitae, ad.</p>
                    <a href="#services" class="btn-get-started scrollto">Go</a>
                  </div>
                </div>
              </div>

            </div>

            <a class="carousel-control-prev" href="#introCarousel" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon ion-ios-arrow-back" aria-hidden="true"></span>
              <span class="sr-only">Previous</span>
            </a>

            <a class="carousel-control-next" href="#introCarousel" role="button" data-slide="next">
              <span class="carousel-control-next-icon ion-ios-arrow-forward" aria-hidden="true"></span>
              <span class="sr-only">Next</span>
            </a>

          </div>
        </div>
      </section>

#particles-js {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: -10;
  top: 0;
  left: 0;
}

#particles-js canvas {
  display: block;
  vertical-align: bottom;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  opacity: 1;
  -webkit-transition: opacity 0.8s ease, -webkit-transform 1.4s ease;
  transition: opacity 0.8s ease, transform 1.4s ease;
}