title: Bootstrap Carousel Control By List Items
body: <p>My question is about how to control bootstrap carousel by list items.</p>
  
  <p>I have more than three list items. Each list item has a content inside of carousel area. What I want is to control these contents by clicking list items which are the headings of these contents. I think this could be achieved by  jquery but i couldt find any sample. Here is what I mean more clearly.</p>
  
  <p>This is my list items.</p>
  
  <pre><code>&lt;div  class="sub-menu-list"style="position:absolute"&gt;
  &lt;ul style="display:inline;"&gt;
           &lt;li&gt;&lt;a href="#purpose-content"&gt;purpose&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#chronology-content"&gt;chronology&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#services-content"&gt;services&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="#contact-content"&gt;contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is carousel content</p>
  
  <pre><code>&lt;div class="carousel-inner"&gt;
  &lt;div class="item active" id="purpose-content"&gt;    
     ... 
  &lt;/div&gt;
  </code></pre>
  
  <p><br>
         ... 
      
    <br>
         ... 
      
    <br>
         ... 
      
    </p>
  
  <p>How to view each carousel content when its list item is clicked? For example i am in contact page and clicked chronology link, It is supposed to slide two times automatically backward or forward to view cronology content. </p>