Issue with Bootstrap carousel: The second item is not displayed when using arrow navigation

I am encountering an issue while trying to implement a bootstrap carousel within a CSS flexbox layout. The problem lies in incorrect HTML code causing the second slide of the carousel not to display. Although I can navigate to the next slide using the next button, the second slide remains invisible.

Shown below is the relevant code snippet:

.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" />
  <title>UniLab</title>
  <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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="81e3eeeef5f2f5f3e0f1c1b5afb2afb0">[email protected]</a>/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="icon-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="icon-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="icon-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="icon-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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="20504f505045520e4a5360110e11140e17">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9cbc6c6dddadddbc8d9e99d879a8798">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

</body>

</html>

I greatly appreciate any assistance provided. <3

javascripthtmlcssbootstrap-5

Answer №1

Your carousel-item were not properly nested, causing the buttons to apply the active class change to an element that was not visible. It's important to ensure that your items are inside the carousel-inner or the main carousel container in your framework, rather than nesting them within each other as you initially did. You can observe this class change by inspecting it in the browser when using the navigation arrows.

https://i.sstatic.net/H0aOV.png

.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>
  <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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9efcf1f1eaedeaecffeedeaab0adb0af">[email protected]</a>/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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bebf4ebebfee9b5f1e8dbaab5aaafb5ac">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="98faf7f7ecebeceaf9e8d8acb6abb6a9">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>

</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The ReactJS Material Table Tree mode experiences delays when new row data is introduced

My Reactjs app utilizes the material-table widget within a component: render() { return ( <div> <Row> <MaterialTable title="Mon équipement" style={{ width: "100%", margin: "0%" }} ...

javascriptreactjstypescriptmaterial-uireact-component

What is the best way to include a json file in an AngularJS controller of a MEAN stack app being run locally?

I am having difficulties including a json file containing data in a locally running mean stack app. Despite trying multiple methods, I continue to encounter a persistent 404 error. $http.get('MOCK_DATA.json').success(function (res){ $scope. ...

javascriptangular

Exploring the ‘ref’ feature in React alongside Material-UI

In my attempt to access input data through React's "ref" attribute on a TextField in Material-UI, I've encountered some difficulties. It doesn't seem straightforward to achieve this using the 'inputRef' or 'inputProps' me ...

javascriptreactjsmaterial-ui

Guide to using three.js for applying a texture to an mtl and obj file

I'm attempting to apply a png file onto an mtl/obj file. Prior to mapping However, after mapping, the mtl texture seems to disappear. After mapping What should I do? My English skills are not great. If you have trouble understanding my question, p ...

javascriptthree.jsmapping

Determine which JavaScript script to include based on whether the code is being executed within a Chrome extension

I am in the process of developing a Chrome extension as well as a web JavaScript application. I currently have an HTML container. I need the container.html file to include <script src="extension.js"> when it is running in the Chrome extension, and ...

javascriptgoogle-chrome-extension

Utilize a Python script to transmit data to JavaScript through JSON in order to dynamically alter the content of

Currently, I am developing an interactive display that utilizes sensors on a raspberry pi. The display is set to show a webpage and I have implemented a python script to handle sensor interaction. My goal is to change the displayed web page when a user p ...

javascriptpythonjson

Resolving a MySQL database problem between mentors and mentees

I have a scenario where a mentor has 10 different mentees. Is there a way to streamline the data storage in my database instead of creating separate fields for each mentee? Currently, I have tables for mentors and students in my database. Could this be a ...

phphtmlmysqlsqldatabase

Looking to manipulate HTML elements using HTMLAgilityPack in C#? Let's explore how it can be done

Let me outline the situation at hand: <a href="test.com">Certain text <b>is bold</b> while some is <b>regular</b></a> So, my question is this: how can I extract the "test.com" section and the hyperlink from the text, w ...

c#htmlparsinghtml-agility-pack

placing a dropdown menu below the search bar

Let's say I have a container with an input search field. My goal is to position a select dropdown right below the search input, ensuring that the dropdown has the same width as the search input (similar to autocomplete functionality). Here's what ...

htmlcsstwitter-bootstrapbootstrap-4

Incorporating fresh CSS styles through Selenium

I am attempting to showcase all the prices available on this page using Selenium and Chrome in order to capture a screenshot. By default, only 3 prices are visible. Is there a way to disable the slick-slider so that all 5 prices can be seen? I have tried r ...

pythoncssseleniumweb-scrapingslick.js

Obtain the complete model within Backbone JS

When working with backbone javascript models, we can obtain individual items like this: var type = this.model.get("type"); The "type" variable is typically defined on the server side and then accessed in JavaScript using the above syntax. But is it poss ...

javascriptajaxbackbone.jsbackbone-viewsbackbone-model

Front Page Luma Design for Magento Platform

As a newcomer to Magento, I am currently using the Luma Home Page which appears blank. My goal is to incorporate an image that spans the entire browser viewport. Is it possible to achieve this through the admin panel by adjusting the CSS within the home pa ...

cssmagento

Top Method for Reloading Element-Specific JavaScript When Replacing Elements

Is there a better way to re-initialize JavaScript without needing a page refresh? I'm currently struggling with appending an MDBootstrap <select> tag, which involves more than just adding a child element. Instead, I have to remove the element an ...

javascriptphphtmljquery

Every single image within a specific domain

Exploring a way to create a gallery showcasing all the images within my domain's internet root folder. These images are scattered across various folders. What is the most efficient method to navigate through these folders and display the images? ...

phphtmlimagegallery

Resize the tab header in primefaces to fit your needs

Is there a way to change the height of the tabView's header specifically in primefaces? Take for instance the tabs with headers like "God Father I", "God Father II" on this link, I only want to adjust the height of the header and not the entire tab. ...

cssprimefaces

What is the best approach for retrieving data from an external URL?

After implementing this code: $(document).ready(function() { $.ajax({ type: "POST", url: "http://steamcommunity.com/market/priceoverview/?currency=3&appid=730&market_hash_name=StatTrak%E2%84%A2%20P250%20%7C%20Steel%20Disruption%20%28Facto ...

javascriptresponseexternal

Find the accurate street view on Google Maps URL without relying on computeheading

I've implemented the computeHeading code from a previous answer by Geocodezip, which is mostly effective but has some minor issues that are not related to Geocodezip. The resulting value from computeHeading is stored in the "heading" variable, which d ...

javascriptgoogle-maps

Unable to deactivate anchor links using jQuery... neither with "disabled" nor with e.preventDefault() while making an ajax request()

Currently, the only issue I am facing is disabling the anchor tag during processing. I have included an AJAX submit library which is functioning correctly. However, I am unable to disable the anchor tag using either "disable" or e.preventDefault(). I woul ...

javascriptjqueryajax

To horizontally center a fixed element in HTML and set its width to match the parent's,

Is there a way to center a fixed div inside its parent element? I'm trying to make the fixed div have the same width as its parent, but it's not working. What could be causing this issue? Check out this example on jsFiddle Here is the HTML code ...

htmlcss

tips for generating a random number for direct display

Can anyone help me figure out how to automatically display the total of numbers from this script on my blog post without having to click anything? Additionally, I need it to update if the browser is refreshed. ` http://jsfiddle.net/BenedictLewis/xmPgR/ ...

javascripthtmlcssbloggerblogspot