title: Bootstrap carousel more slides linked to one indicator
body: <p>I am using Bootstrap carousel control and I need to use <strong>less indicators than slides</strong>. So for example for slide 1 - 3 the first indicator will be active. When I click to another indicator, it will skip to slide 4.  </p>
  
  <p>I tried to solve it by having all of indicators in HTML, but hiding some of them with <code>display: none</code>. Then with JS find active slide, remove <code>.active</code> class and add it to the right indicator.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!-- Indicators --&gt;
  &lt;ul class="carousel-indicators"&gt;
     &lt;!-- For these three only #a indicator should be active --&gt;
     &lt;li id="a" data-target="#carousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
     &lt;li id="a1" class="hidden" data-target="#carousel" data-slide-to="1"&gt;&lt;/li&gt;
     &lt;li id="a2" class="hidden" data-target="#carousel" data-slide-to="2"&gt;&lt;/li&gt;
  
     &lt;!-- another group --&gt;
     &lt;li id="b" data-target="#carousel" data-slide-to="3"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$('#carousel').on('slid.bs.carousel', function (e) {
      if ($("#a1").hasClass("active")) {
          $("#a1").removeClass("active");
          $("#a").addClass("active");
      } else if ($("#a2").hasClass("active")) {
          $("#a2").removeClass("active");
          $("#a").addClass("active");
      }
  });
  </code></pre>
  
  <p>Here is an example - <a href="https://jsfiddle.net/9x5u7kjx/2/" rel="nofollow">https://jsfiddle.net/9x5u7kjx/2/</a></p>
  
  <p>I think this is not elegant solution at all, so is there any better way to do it?</p>
  
  <hr>
  
  <p><strong>EDIT:</strong>
  I will try to explain it more clearly. </p>
  
  <p>There are for example 12 slides, which slide automatically one by one. They can be controlled by arrows (left and right). <strong>But there are only 4 indicators</strong> (those circles below carousel). And for slide 1 - 3 the first indicator should be active, for 4 - 6 the second one and so on. </p>
  
  <p>So I can slide one by one item using arrows, but when I click second indicator the carousel will skip to slide 4.</p>
  
  <p>Have a look at the example, it works as it should, but I think this could be solved better.</p>