title: Bootstrap-3 carousel controls on outside
body: <p>See my <a href="http://www.bootply.com/owKdCnv6Bo" rel="nofollow">bootply</a></p>
  
  <p>I have a Bootstrap-3 carousel with 3 x DIVs showing each time. You can click right and left for next 3 x DIVs to show. But my indicators are a whole area where you can click, the grey block. Is it possible to just have the > thingie clickable?
  Also, how to get the > thingie to be outside my DIV, now its overlapping with my content? Gracias!</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="carousel slide" data-ride="carousel" id=
  "carousel-example- generic"&gt;
      &lt;!-- Indicators --&gt;
      &lt;ol class="carousel-indicators"&gt;
          &lt;li class="active" data-slide-to="0" data-target=
          "#carousel-example-generic"&gt;&lt;/li&gt;
  
          &lt;li data-slide-to="1" data-target="#carousel-example-generic"&gt;&lt;/li&gt;
  
          &lt;li data-slide-to="2" data-target="#carousel-example-generic"&gt;&lt;/li&gt;
      &lt;/ol&gt;&lt;!-- Slider Content (Wrapper for slides )--&gt;
  
      &lt;div class="carousel-inner"&gt;
          &lt;div class="item active"&gt;
              &lt;div class="col-md-4 col-sm-6"&gt;
                  &lt;p&gt;
               aaaaaaaaaaaaaaaaaaaa&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-4 col-sm-6 hidden-xs"&gt;
                  &lt;p&gt;bbbbbbbbbbbbbb&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-4 col-sm-6 hidden-sm hidden-xs"&gt;
                  &lt;p&gt;cccccccccccccc&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="item"&gt;
              &lt;div class="col-md-4 col-sm-6"&gt;
                  &lt;p&gt;dddddddddddddd&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-4 col-sm-6 hidden-xs"&gt;
                  &lt;p&gt;eeeeeeeeeeeeee&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="col-md-4 col-sm-6 hidden-sm hidden-xs"&gt;
                  &lt;p&gt;ffffffffffffff&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- Controls --&gt;
  &lt;a class="left carousel-control" data-slide="prev" href=
  "#carousel-example-generic"&gt;&lt;span class=
  "glyphicon glyphicon-chevron-left"&gt;&lt;/span&gt;&lt;/a&gt; &lt;a class=
  "right carousel-control" data-slide="next" href=
  "#carousel-example-generic"&gt;&lt;span class=
  "glyphicon glyphicon-chevron-right"&gt;&lt;/span&gt;&lt;/a&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.carousel-indicators li { visibility: hidden; }
  
  .carousel-inner .item {
  font-size:10px;
  color:#0404B4
  }
  
  .carousel-control {
  z-index: 10;
  top: 2%;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  }
  </code></pre>