title: How to go to next carousel item on click of a button inside carousel item
body: <p>I am trying to create a carousel in <code>Bootstrap 4</code> where I have a next button inside the carousel item. I want to move to next carousel when I <code>click</code> on this next button.</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval='false'&gt;
      &lt;ol class="carousel-indicators"&gt;
        &lt;li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"&gt;&lt;/li&gt;
        &lt;li data-target="#carouselExampleIndicators" data-slide-to="1"&gt;&lt;/li&gt;
        &lt;li data-target="#carouselExampleIndicators" data-slide-to="2"&gt;&lt;/li&gt;
      &lt;/ol&gt;
      &lt;div class="carousel-inner "&gt;
        &lt;div class="carousel-item active"&gt;
          &lt;button type="submit" class="btn btn-primary" id="gotoNext1"&gt;Next&lt;/button&gt;
          &lt;img src="https://placehold.it/900x350/e8117f/fff&amp;text=Image%201" alt="Image 1"/&gt;        
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;button type="submit" class="btn btn-primary" id="gotoNext2"&gt;Next&lt;/button&gt;
          &lt;img src="https://placehold.it/900x350/9ACD32/fff&amp;text=Image%202" alt="Image 2"/&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item"&gt;
          &lt;img src="https://placehold.it/900x350/FF6347/fff&amp;text=Image%203" alt="Image 3"/&gt;
        &lt;/div&gt;
      &lt;/div&gt;        
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Please, can someone help me to implement this functionality using <code>Javascript</code> or <code>jquery</code>?</p>
  
  <p>I can move next or prev using carousel indicators but I want to move forward using the buttons.</p>
  
  <p>See the <a href="https://jsfiddle.net/Lhn3r5mj/7/" rel="nofollow noreferrer">jsfiddle link</a> for more details...</p>