title: Carousel sliding animation not working on Bootstrap 4.5.2
body: <p>I'm in the process of learning Bootstrap (v4.5.2), and wanted to create a simple carousel that slides automatically for my website. I went to Bootstrap documentation and copied the example code for a carousel with slides only (<a href="https://getbootstrap.com/docs/4.5/components/carousel/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.5/components/carousel/</a>), and added some color and height to the divs to see if it was working. Here is the code:</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 {
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- Bootstrap v4.5.2 CSS --&gt;
  &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;
  
  &lt;!-- JS, Popper.js, and jQuery --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel"&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="carousel-item active" style="background-color:red;"&gt;
        &lt;img class="d-block w-100" src="..." alt="First slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item" style="background-color:blue;"&gt;
        &lt;img class="d-block w-100" src="..." alt="Second slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item" style="background-color:yellow;"&gt;
        &lt;img class="d-block w-100" src="..." alt="Third slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>As you can see, everything works fine except the sliding animation. If instead of v4.5.2 I use v4.0.0 of bootstrap (with the exact same code) it works perfectly fine:</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{
    height: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!--Bootstrap v4.0.0 CSS--&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"&gt;
  &lt;!-- JS, Popper.js, and jQuery --&gt;
  &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"&gt;&lt;/script&gt;
  
  &lt;div id="carouselExampleSlidesOnly" class="carousel slide" data-ride="carousel" data-interval="3000" data-pause: "hover";&gt;
    &lt;div class="carousel-inner"&gt;
      &lt;div class="carousel-item active" style="background-color:red;"&gt;
        &lt;img class="d-block w-100" src="..." alt="First slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item" style="background-color:blue;"&gt;
        &lt;img class="d-block w-100" src="..." alt="Second slide"&gt;
      &lt;/div&gt;
      &lt;div class="carousel-item" style="background-color:yellow;"&gt;
        &lt;img class="d-block w-100" src="..." alt="Third slide"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But I would like to use the latest version of the framework if possible.
  I have noticed that even in the documentation pages, in v4.0.0 sliding animation works on the example slides (<a href="https://getbootstrap.com/docs/4.0/components/carousel/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.0/components/carousel/</a>), but not in v4.5.2 (<a href="https://getbootstrap.com/docs/4.5/components/carousel/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.5/components/carousel/</a>), so I'm guessing this might be a bug from the newer version? Or maybe as I'm a newbie I'm doing something wrong? Thanks in advance for your answers, I hope the question is clear and well written, it's my first time asking somtehing over here.</p>