title: Bootstrap Carousel Fade and Buttons items not working
body: <p>I have been trying to test out creating a carousel on bootstrap that fades between three images (in this case 3 'gorilla' jpgs). But I am having difficulties as I learn HTML.</p>
  <p>Issue 1: The carousel is not fading between these images despite the class being set to &quot;carousel slide carousel-fade&quot;.</p>
  <p>Issue 2: The button classes at the bottom are displaying the text Previous and Next and are working, however, I am needing these to be icons rather than text. Hiding the text does not display the icons.</p>
  <p>I am a beginner at all of this so I appreciate all the help!</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-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"&gt;
      
    
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="myCarousel" class="carousel slide carousel-fade" data-bs-ride="carousel"&gt;
      &lt;div class="carousel-indicators"&gt;
        &lt;button type="button" data-bs-target="#myCarousel" data-bs-slide-to="0" class="active" aria-current="true"
          aria-label="Slide 1"&gt;&lt;/button&gt;
        &lt;button type="button" data-bs-target="#myCarousel" data-bs-slide-to="1" aria-label="Slide 2"&gt;&lt;/button&gt;
        &lt;button type="button" data-bs-target="#myCarousel" data-bs-slide-to="2" aria-label="Slide 3"&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="carousel-inner"&gt;
        &lt;div class="carousel-item active" data-bs-interval="3000"&gt;
          &lt;img src="http://placehold.jp/150x150.png" class="d-block w-100" alt="..."&gt;
          &lt;div class="carousel-caption d-none d-md-block"&gt;
            &lt;h5&gt;First slide label&lt;/h5&gt;
            &lt;p&gt;Some representative placeholder content for the first slide.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item" data-bs-interval="3000"&gt;
          &lt;img src="http://placehold.jp/50x50.png" class="d-block w-100" alt="..."&gt;
          &lt;div class="carousel-caption d-none d-md-block"&gt;
            &lt;h5&gt;Second slide label&lt;/h5&gt;
            &lt;p&gt;Some representative placeholder content for the second slide.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="carousel-item" data-bs-interval="3000"&gt;
          &lt;img src="http://placehold.jp/100x100.png" class="d-block w-100" alt="..."&gt;
          &lt;div class="carousel-caption d-none d-md-block"&gt;
            &lt;h5&gt;Third slide label&lt;/h5&gt;
            &lt;p&gt;Some representative placeholder content for the third slide.&lt;/p&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;button class="carousel-control-prev" type="button" data-bs-target="#myCarousel" data-bs-slide="prev"&gt;
        &lt;span class="carousel-control-prev-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Previous&lt;/span&gt;
      &lt;/button&gt;
      &lt;button class="carousel-control-next" type="button" data-bs-target="#myCarousel" data-bs-slide="next"&gt;
        &lt;span class="carousel-control-next-icon" aria-hidden="true"&gt;&lt;/span&gt;
        &lt;span class="sr-only"&gt;Next&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>