Resolved: Bootstrap carousel issue: using arrow navigation doesn't display the second item

Question:

I’m trying to use bootstrap carousel inside CSS flexbox. My issue is that I made some mistakes in the HTML and the second slide of the carousel doesn’t show up. I can use the next button to move from the first slide, but it doesn’t display the second and stays blank.
Here’s my code:

.news {
  display: flex;
  height: 600px;
  width: 100%;
}

#flex-box-1 {
  width: 50%;
  height: 100%;
  background-color: green;
}

#flex-box-2 {
  width: 50%;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- <meta name="description" content="Unilab career acceleration project" /> -->
  <title>UniLab</title><link rel="preload" as="font" href="https://devsfix.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v2.2" type="font/woff2" crossorigin="anonymous" />
  <script src="https://kit.fontawesome.com/b51b7dd055.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

  <section class="news">
    <div id="flex-box-1">
      <div id="places">
        <h2>WORLD NEWS</h2>
        <hr>
        <h2>Amazing places in America to visit.</h2>
        <p>For some reason — this country, this city, this neighborhood, this particular street —  is the place you are living a majority of your life in.</p>
        <button onclick="location.href = './Desktop 3/main.html';" id="myButton">LEARN MORE</button>
      </div>
    </div>



    <div id="flex-box-2" class="container">
      <div id="news-header" class="column">
        <div id='box-1'>
          <h2>MORE NEWS</h2>
        </div>

        <div id='box-2'>
          <div class="col-6 text-right">
            <a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="prev">
              <i class="fa-solid fa-angle-left"></i>
            </a>
            <a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="next">
              <i class="fa-solid fa-angle-right"></i>
            </a>
          </div>
        </div>
      </div>

      <hr>
      <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="column">
              <article class="card">
                <h3 class="pink">TRAVEL</h3>
                <h3 class="article-title">Article title</h3>
                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                <i class="fa-regular fa-clock"></i>
                <span>2 mins ago</span>
              </article>

              <article class="card">
                <h3 class="pink">TECHNOLOGY</h3>
                <h3 class="article-title">Article title</h3>
                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                <i class="fa-regular fa-clock"></i>
                <span>2 mins ago</span>
              </article>
            </div>

            <div class="carousel-item">
              <div class="column">
                <article class="card">
                  <h3 class="pink">TRAVEL</h3>
                  <h3 class="article-title">Article title</h3>
                  <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                  <i class="fa-regular fa-clock"></i>
                  <span>2 mins ago</span>
                </article>

                <article class="card">
                  <h3 class="pink">TECHNOLOGY</h3>
                  <h3 class="article-title">Article title</h3>
                  <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                  <i class="fa-regular fa-clock"></i>
                  <span>2 mins ago</span>
                </article>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- <script src="./scripts.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>


</body>

</html>

Thanks in advance <3

Answer:

Your carousel-item weren’t nested correctly, so when the buttons were triggering the active class change it was applying it to an element that was nested in an element that was no longer visible. When you do these, make sure you check to ensure that your items are inside the carousel-inner or the primary carousel container in whatever framework you use and not inside of each other as you had them initially. If you watch it in the browser inspector, you can see the class change when you use the nav arrows

.news {
  display: flex;
  height: 600px;
  width: 100%;
}

#flex-box-1 {
  width: 50%;
  height: 100%;
  background-color: green;
}

#flex-box-2 {
  width: 50%;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- <meta name="description" content="Unilab career acceleration project" /> -->
  <title>UniLab</title><link rel="preload" as="font" href="https://devsfix.com/wp-content/themes/smart-mag/css/icons/fonts/ts-icons.woff2?v2.2" type="font/woff2" crossorigin="anonymous" />
  <script src="https://kit.fontawesome.com/b51b7dd055.js" crossorigin="anonymous"></script>
  <link rel="stylesheet" href="styles.css" />
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>

<body>

  <section class="news">
    <div id="flex-box-1">
      <div id="places">
        <h2>WORLD NEWS</h2>
        <hr>
        <h2>Amazing places in America to visit.</h2>
        <p>For some reason — this country, this city, this neighborhood, this particular street —  is the place you are living a majority of your life in.</p>
        <button onclick="location.href = './Desktop 3/main.html';" id="myButton">LEARN MORE</button>
      </div>
    </div>
    <div id="flex-box-2" class="container">
      <div id="news-header" class="column">
        <div id='box-1'>
          <h2>MORE NEWS</h2>
        </div>
        <div id='box-2'>
          <div class="col-6 text-right">
            <a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="prev">
              <i class="fa-solid fa-angle-left"></i>
            </a>
            <a class="btn" href="#carouselExampleIndicators2" role="button" data-slide="next">
              <i class="fa-solid fa-angle-right"></i>
            </a>
          </div>
        </div>
      </div>
      <hr>
      <div id="carouselExampleIndicators2" class="carousel slide" data-ride="carousel" data-interval="false">
        <div class="carousel-inner">
          <div class="carousel-item active">
            <div class="column">
              <article class="card">
                <h3 class="pink">TRAVEL</h3>
                <h3 class="article-title">Article title</h3>
                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                <i class="fa-regular fa-clock"></i>
                <span>2 mins ago</span>
              </article>
              <article class="card">
                <h3 class="pink">TECHNOLOGY</h3>
                <h3 class="article-title">Article title</h3>
                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                <i class="fa-regular fa-clock"></i>
                <span>2 mins ago</span>
              </article>
            </div>
          </div>
          <div class="carousel-item">
            <div class="column">
              <article class="card">
                <h3 class="pink">TRAVEL</h3>
                <h3 class="article-title">Article title</h3>
                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                <i class="fa-regular fa-clock"></i>
                <span>2 mins ago</span>
              </article>
              <article class="card">
                <h3 class="pink">TECHNOLOGY</h3>
                <h3 class="article-title">Article title</h3>
                <p>Lorem ipsum dolor sit amet, ipsum labitur lucilius mel id, ad has appareat…</p>
                <i class="fa-regular fa-clock"></i>
                <span>2 mins ago</span>
              </article>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <!-- <script src="./scripts.js"></script> -->
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

</html>

If you have better answer, please add a comment about this, thank you!

Resolved: Bootstrap carousel issue: using arrow navigation doesn’t display the second item

Resolved: How to give rank on datetime column group by another column with userid in it

Resolved: Passing 2 functions in onChange in react

Resolved: Why doesn’t stringstream consume output during hex formatting?

Leave A Reply