title: Particles.js canvas does not work when positioned in other Bootstrap carousel slide position
body: <p>I'm making a website with the Bootstrap carousel wich should contains some animated canvas.
  I'd like to use Particles.js animation on second slide but It does not work.
  It works only on first slide and I can't figure out why.</p>
  
  <p>Can someone help me?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;style&gt;
      #myCarousel {
        height: 500px
      }
      .carousel-inner &gt; .item &gt; img,
      .carousel-inner &gt; .item &gt; a &gt; img {
        width: 70%;
        margin: auto;
      }
      canvas {
        position: relative;
        /*pointer-events:none;*/
        top: 0;
        left: 0
      }
      /* Particles Canvas*/
      #particles-js{
        height: 500px;
        width: 100%;
        background-color: #D0EDF5;
        background-image: url('');
        background-size: cover;
        background-position: 50% 50%;
        background-repeat: no-repeat;
      }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container"&gt;
      &lt;br&gt;
      &lt;div id="myCarousel" class="carousel slide" data-ride="carousel"&gt;
        &lt;!-- Indicators --&gt;
        &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#myCarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="1"&gt;&lt;/li&gt;
          &lt;li data-target="#myCarousel" data-slide-to="2"&gt;&lt;/li&gt;
        &lt;/ol&gt;
        &lt;!-- Wrapper for slides --&gt;
        &lt;div class="carousel-inner" role="listbox"&gt;
          &lt;div class="item active"&gt;
            &lt;h1&gt;First Slide&lt;/h1&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;div id="particles-js"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="item"&gt;
            &lt;h1&gt;Third Slide&lt;/h1&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;!-- Left and right controls --&gt;
        &lt;a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev"&gt;
          &lt;span class="glyphicon glyphicon-chevron-left" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
        &lt;/a&gt;
        &lt;a class="right carousel-control" href="#myCarousel" role="button" data-slide="next"&gt;
          &lt;span class="glyphicon glyphicon-chevron-right" aria-hidden="true"&gt;&lt;/span&gt;
          &lt;span class="sr-only"&gt;Next&lt;/span&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;script type="text/javascript" src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript"&gt;
      particlesJS('particles-js',
  
        {
          "particles": {
            "number": {
              "value": 60,
              "density": {
                "enable": true,
                "value_area": 800
              }
            },
            "color": {
              "value": "#0A8B80"
            },
            "shape": {
              "type": "circle",
              "stroke": {
                "width": 0,
                "color": "#000000"
              },
              "polygon": {
                "nb_sides": 5
              },
              "image": {
                "src": "img/github.svg",
                "width": 100,
                "height": 50
              }
            },
            "opacity": {
              "value": 0.5,
              "random": false,
              "anim": {
                "enable": false,
                "speed": 1,
                "opacity_min": 0.1,
                "sync": false
              }
            },
            "size": {
              "value": 20,
              "random": true,
              "anim": {
                "enable": false,
                "speed": 40,
                "size_min": 0.1,
                "sync": false
              }
            },
            "line_linked": {
              "enable": true,
              "distance": 150,
              "color": "#65BBC4",
              "opacity": 0.4,
              "width": 2
            },
            "move": {
              "enable": true,
              "speed": 6,
              "direction": "none",
              "random": false,
              "straight": false,
              "out_mode": "out",
              "attract": {
                "enable": false,
                "rotateX": 600,
                "rotateY": 1200
              }
            }
          },
          "interactivity": {
            "detect_on": "canvas",
            "events": {
              "onhover": {
                "enable": true,
                "mode": "repulse"
              },
              "onclick": {
                "enable": true,
                "mode": "push"
              },
              "resize": true
            },
            "modes": {
              "grab": {
                "distance": 400,
                "line_linked": {
                  "opacity": 1
                }
              },
              "bubble": {
                "distance": 400,
                "size": 80,
                "duration": 2,
                "opacity": 8,
                "speed": 3
              },
              "repulse": {
                "distance": 200
              },
              "push": {
                "particles_nb": 4
              },
              "remove": {
                "particles_nb": 2
              }
            }
          },
          "retina_detect": true,
          "config_demo": {
            "hide_card": false,
            "background_color": "#D0EDF5",
            "background_image": "",
            "background_position": "50% 50%",
            "background_repeat": "no-repeat",
            "background_size": "cover"
          }
        }
      );
    &lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Moreover, I noticed that the animation starts while open the developer console of the browser like the examples below:</p>
  
  <p><a href="http://i.stack.imgur.com/PU4xn.png" rel="nofollow">Before</a></p>
  
  <p><a href="http://i.stack.imgur.com/tVFK5.png" rel="nofollow">After</a></p>