title: How to make this carousel change the image every 'defined' seconds?
body: <p>I want the output to change the image every 3 seconds. I don't know how to modify the existing output. I can't find the appropriate attribute to edit. </p>
  
  <p>The link to the website is <a href="https://www.vimaldevelopers.com" rel="nofollow noreferrer">https://www.vimaldevelopers.com</a>. Please help me in inspecting and solving this problem</p>
  
  <p>The link to the image of the carousel <a href="https://i.imgur.com/98SsWA0.png" rel="nofollow noreferrer">https://i.imgur.com/98SsWA0.png</a> (need 10 reputation to post the image so I have to share the link instead)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>carousel-item:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.1);
  }
  
  .carousel-inner img {
    width: 100%;
    height: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section class="container-fluid px-0"&gt;
    &lt;div class="row align-items-center"&gt;
      &lt;div class="col-lg-12 text-center sliderpaddingtop py-5"&gt;
        &lt;div class="row justify-content-center"&gt;
          &lt;!-- &lt;div id="headingGroup" class="text-center col-10 col-lg-8  d-lg-block mt-5 pt-md-5"&gt; --&gt;
            &lt;div id="demo" class="carousel slide" data-ride="carousel"&gt;
              &lt;ul class="carousel-indicators"&gt;
                &lt;li data-target="#demo" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                &lt;li data-target="#demo" data-slide-to="1"&gt;&lt;/li&gt;
                &lt;li data-target="#demo" data-slide-to="2"&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div class="carousel-inner"&gt;
                &lt;div class="carousel-item active"&gt;
                  &lt;img class="img-fluid" src="imgs/vc.jpg" alt="Los Angeles"&gt;
                &lt;/div&gt;
                &lt;div class="carousel-item"&gt;
                  &lt;img class="img-fluid" src="imgs/vh.jpg" alt="Chicago"&gt;
                &lt;/div&gt;
                &lt;div class="carousel-item"&gt;
                  &lt;img class="img-fluid" src="imgs/vi.jpg" alt="New York"&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;a class="carousel-control-prev" href="#demo" data-slide="prev"&gt;
                &lt;span class="carousel-control-prev-icon"&gt;&lt;/span&gt;
              &lt;/a&gt;
              &lt;a class="carousel-control-next" href="#demo" data-slide="next"&gt;
                &lt;span class="carousel-control-next-icon"&gt;&lt;/span&gt;
              &lt;/a&gt;
            &lt;/div&gt;
          &lt;!-- &lt;/div&gt; --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>