title: Bootstrap carousel indicators out of the main div not switching automatically
body: <p>I have the latest Bootstrap, and have a carousel somewhere on my page, with the indicators outside of the main carousel div.</p>
  
  <p>My carousel:</p>
  
  <pre><code>&lt;div class="background-carousel"&gt;
      &lt;div class="carousel slide carousel-fade" id="carousel-home" data-ride="carousel1"&gt;
          &lt;div class="carousel-inner" role="listbox" id="carousel-inner-home"&gt;
              &lt;div data-slide-no="0" class="item carousel-item active" style="background-image:url(&lt;?php echo get_template_directory_uri(); ?&gt;/assets/img/home-bg-1.png)"&gt;
              &lt;/div&gt;
              &lt;div data-slide-no="1" class="item carousel-item" style="background-image:url(&lt;?php echo get_template_directory_uri(); ?&gt;/assets/img/grass.jpg)"&gt;
              &lt;/div&gt;
              &lt;div data-slide-no="2" class="item carousel-item" style="background-image:url(&lt;?php echo get_template_directory_uri(); ?&gt;/assets/img/grass2.jpg)"&gt;
              &lt;/div&gt;
              &lt;div data-slide-no="3" class="item carousel-item" style="background-image:url(&lt;?php echo get_template_directory_uri(); ?&gt;/assets/img/grass3.jpg)"&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;!-- carousel --&gt;
  &lt;/div&gt; &lt;!-- /.background-carousel --&gt;
  </code></pre>
  
  <p>I then have my indicators else where on the page:</p>
  
  <pre><code>&lt;div class="home-carousel-indicators"&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li data-target="#carousel-home" data-slide-to="0" class="carousel-switcher active"&gt;&lt;/li&gt;
          &lt;li data-target="#carousel-home" data-slide-to="1" class="carousel-switcher"&gt;&lt;/li&gt;
          &lt;li data-target="#carousel-home" data-slide-to="2" class="carousel-switcher"&gt;&lt;/li&gt;
          &lt;li data-target="#carousel-home" data-slide-to="3" class="carousel-switcher"&gt;&lt;/li&gt;
      &lt;/ol&gt;
  &lt;/div&gt; &lt;!-- /.home-caraousel-indicators --&gt;
  </code></pre>
  
  <p>As the carousel switches pictures, the indicators don't change. I also had to use a workaround to get them to change the carousel when clicked.</p>
  
  <p><strong>Summing it up:</strong></p>
  
  <ul>
  <li>My carousel works fine. </li>
  <li>My carousel indicators are outside of the carousel div. </li>
  <li>The indicators do not automatically switch when the carousel does.</li>
  <li>I had to use a jQuery workaround to fix the indicators when clicking them.</li>
  </ul>