What could be causing my Bootstrap 4 Carousel to not appear on my site?

I followed all the steps to include the Bootstrap 4 carousel code correctly, including adding the necessary libraries and plugins at the end. While the navbar is functioning properly, I am puzzled as to why the carousel is not displaying. Is there something missing that I need to add for the carousel to work?

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

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- bootstrap cdn  -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    <!-- fontawesome cdn -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
      integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

    <!-- custom css  -->
    <link rel="stylesheet" href="indexStyle.css">

    <title>BLANK</title>
  </head>

  <body>
    <!-- Design the navbar  -->
    <nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
      <a href="main.html" class="navbar-brand"><i class="fas fa-pencil-ruler mr-2"></i>BLANK</a>
      <!-- hamburger menu when shrinked -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
        <span class="navbar-toggler-icon"></span>
      </button>

      <div class="colapse navbar-collapse" id="navLinks">
        <ul class="navbar-nav">
          <li class="nav-item dropdown">
            <a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
              data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              ABOUT
            </a>
            <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
              <a href="about.html" class="dropdown-item">ABOUT US</a>
              <a href="#" class="dropdown-item">OUR TEAM</a>
              <a href="#" class="dropdown-item">OUR MISSION</a>
              <a href="#" class="dropdown-item">CONTACT US</a>
            </div>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link mr-2">PARENTS/GUARDIANS</a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link mr-2">STUDENTS</a>
          </li>
        </ul>
      </div>
    </nav>

    <section>
      <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
        <ul class="carousel-indicators">
          <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
        </ul>
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="slide1.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="slide2.jpg" class="d-block w-100" alt="...">
          </div>
          <div class="carousel-item">
            <img src="slide3.jpg" class="d-block w-100" alt="...">
          </div>
        </div>
        <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </section>

    <!-- Mid Section  -->
    <div class="container text-center">
      <h3 class="display-5" id="big-title">A New Way of Learning</h3>
      <p>Join us for free exclusive free classes</p>
    </div>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
  </body>

</html>

javascripthtmlcssbootstrap-4bootstrap-carousel

Answer №1

Your code is functioning correctly. The Bootstrap 4 Carousel will not display if the image src is invalid.

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

<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- bootstrap cdn -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <!-- fontawesome cdn -->
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
    integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">

  <!-- custom css -->
  <link rel="stylesheet" href="indexStyle.css">

  <title>BLANK</title>
</head>

<body>
  <!-- Design the navbar -->
  <nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
    <a href="main.html" class="navbar-brand"><i class="fas fa-pencil-ruler mr-2"></i>BLANK</a>
    <!-- hamburger menu when shrinked -->
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="colapse navbar-collapse" id="navLinks">
      <ul class="navbar-nav">
        <li class="nav-item dropdown">
          <a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">ABOUT</a>
          <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <a href="about.html" class="dropdown-item">ABOUT US</a>
            <a href="#" class="dropdown-item">OUR TEAM</a>
            <a href="#" class="dropdown-item">OUR MISSION</a>
            <a href="#" class="dropdown-item">CONTACT US</a>
          </div>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link mr-2">PARENTS/GUARDIANS</a>
        </li>
        <li class="nav-item">
          <a href="#" class="nav-link mr-2">STUDENTS</a>
        </li>
      </ul>
    </div>
  </nav>

  <section>
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
      <ul class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
      </ul>
      <div class="carousel-inner">
        <div class="carousel-item active">
          <img src="https://www.ahtcloud.com/images/ahttms_mock.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="https://www.ahtcloud.com/images/ahttms_mock.jpg" class="d-block w-100" alt="...">
        </div>
        <div class="carousel-item">
          <img src="https://www.ahtcloud.com/images/ahttms.jpg" class="d-block w-100" alt="...">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"><span class="carousel-control-prev-icon" aria-hidden="true"></span><span class="sr-only">Previous</span></a>
      <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next"><span class="carousel-control-next-icon" aria-hidden="true"></span><span class="sr-only">Next</span></a>
    </div>
  </section>

  <!-- Mid Section -->
  <div class="container text-center">
    <h3 class="display-5" id="big-title">A New Way of Learning</h3><p>Join us for exclusive free classes</p></div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body></html>

Answer №2

Did you consider moving the scripts to the top of the page instead? I used the same code with my images and they displayed correctly.

<<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Bootstrap CDN -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  

    <!-- Fontawesome CDN -->
      <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css"
        integrity="sha384-HzLeBuhoNPvSl5KYnjx0BT+WB0QEEqLprO+NBkkk5gbc67FTaL7XIGa2w1L0Xbgc" crossorigin="anonymous">
      <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
      <script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="65150a151500174b0f1625544b54534b54">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
      <!-- Custom CSS -->
      <link rel="stylesheet" href="indexStyle.css">
    
      <title>BLANK</title>
    </head>

    <body>
      <!-- Design the navbar -->
      <nav id="mainNavbar" class="navbar navbar-expand-md navbar-dark bg-dark py-0 fixed-top">
        <a href="main.html" class="navbar-brand"><i class="fas fa-pencil-ruler mr-2"></i>BLANK</a>
        <!-- Hamburger menu when shrinked -->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navLinks">
          <span class="navbar-toggler-icon"></span>
        </button>
    
        <div class="collapse navbar-collapse" id="navLinks">
          <ul class="navbar-nav">
            <li class="nav-item dropdown">
              <a href="#" class="nav-link dropdown-toggle mr-2" id="navbarDropdownMenuLink" role="button"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                ABOUT
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a href="about.html" class="dropdown-item">ABOUT US</a>
                <a href="#" class="dropdown-item">OUR TEAM</a>
                <a href="#" class="dropdown-item">OUR MISSION</a>
                <a href="#" class="dropdown-item">CONTACT US</a>
              </div>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link mr-2">PARENTS/GUARDIANS</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link mr-2">STUDENTS</a>
            </li>
          </ul>
        </div>
      </nav>
    
      <section>
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
          <ul class="carousel-indicators">
            <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
            <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
          </ul>
          <div class="carousel-inner">
            <div class="carousel-item active">
              <img src="slide1.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="slide2.jpg" class="d-block w-100" alt="...">
            </div>
            <div class="carousel-item">
              <img src="slide3.jpg" class="d-block w-100" alt="...">
            </div>
          </div>
          <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
          </a>
          <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
          </a>
        </div>
      </section>
    
      <!-- Mid Section -->
      <div class="container text-center">
        <h3 class="display-5" id="big-title">A New Way of Learning</h3>
        <p>Join us for free exclusive classes</p>
      </div>

</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

Steps to ensure a dropdown menu remains expanded when its nested menu is selected

Check out this dropdown list here, but the issue arises when clicking on a nested menu item such as "Books Registration". Once that page loads, the dropdown menu collapses like shown here. Here's a snippet of the dropdown code: <ul class="nav nav- ...

javascripthtmlcssdrop-down-menu

Getting variables from different functions in Python can be achieved by using the return

I am trying to implement a feature where I can fetch a search term from the function getRandomVideo() and then use it in a jQuery statement. For example, if I get "Beethoven" as the search term from the variable searches, I want to use it to retrieve JS ...

javascriptjqueryhtml

Email sending through PHP AJAX can be done without refreshing the page. The email action is handled in email.php and incorporated into

I am having trouble sending this with AJAX. The error message I keep getting is: Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more assistance, please visit @ jquer ...

jqueryhtmlajax

Combine the entities within the object

I need to combine two objects that contain other objects within them, similar to the following structure: let selections = { 123: { abc: {name: 'abc'}, def: {name: 'def'} }, 456: { ghi: {name: ' ...

javascriptobjectmerge

Instructions for showing a particular image on a different page upon clicking a button with JavaScript

I have created a fictional ecommerce website as a personal project. The home page features image links to various shoe products, each with its own product page containing an image, name, and placeholder description. When users click the "Buy Now" button on ...

javascripthtml

The checkbox display and hide functionality is mistakenly inverted

I have a form set up with an input field that should show or hide depending on whether a checkbox is clicked. Currently, the field is showing and hides when the checkbox is clicked. How can I reverse this behavior so that it works the other way around? ...

htmljquerycssbootstrap-4

Utilize a single WebAssembly instance within two separate Web Workers

After compiling a wasm file from golang (version 1.3.5), I noticed that certain functions using goroutines are not supported. When these functions are called, they run in the current thread and slow down my worker significantly. To address this issue, I w ...

javascriptvue.jsgowebpackwebassembly

Trouble arises when attempting to transfer cookies between server in Fastify and application in Svelte Kit

In the process of developing a web application, I am utilizing Fastify for the backend server and Svelte Kit for the frontend. My current challenge lies in sending cookies from the server to the client effectively. Despite configuring Fastify with the @fas ...

javascripttypescriptcookiessveltefastify

The order in which events are handled

Understanding Event Handling in Javascript and jQuery When an event (such as 'click') is bound to one function for the parent element and another handler function for a child DOM element, which of them gets called? If both are triggered, what is ...

javascriptjquerydom-eventsevent-bubbling

When setting the height to auto in Dreamweaver for a background image, no content will be displayed

I have been searching through several questions on this platform today in the hopes of finding an answer to my query, but unfortunately, I haven't had any luck so far. That's why I'm turning to you all for help. My current goal is to transi ...

htmlcssresponsive-designdreamweaverfluid-layout

"Javascript encountered an unrecognizable expression when trying to parse a single

Whenever this event occurs, I'm encountering a console error that states "unrecognized expression: .". Everything seems to be working fine so I'm not entirely sure what the issue is other than possibly a syntax error. Any suggestions or ideas on ...

javascripthtmljquerycss

Tips for designing a background that dynamically adjusts its height based on the content

Currently, I am struggling to set up a background that automatically adjusts in height as new content is added. What I want to achieve is for the background to cover the entire screen (100vh) if there is no content, and then adjust its height as content is ...

htmlcsstypescriptbootstrap-4

Event handlers do not have a definition for "this"

Why is the count not defined in the increaseCounter function but is defined in the getBadgeClass function? <button onClick={this.increaseCounter} className={this.getBadgeClasses()}>Increment</button> getBadgeClasses() { ...

javascriptreactjs

Getting console data in AngularJS can be achieved by using the console.log()

This log in the console is functioning correctly. Is there a way to retrieve this information for the HTML? ProductController.js $scope.selectedProduct = function(product) { console.log(product.post_title); console.log(product.ID); console.l ...

javascriptjqueryangularjsangularjs-directiveangularjs-scope

What is the default way to toggle content in rows using Material UI?

Currently, I am utilizing Muitables and have a query regarding how to set the expanded rows to be displayed by default, similar to the illustration below: Upon initial page load, it is preferred for the content in that row to automatically expand (arrow d ...

javascriptcssreactjsmaterial-uitoggle

Transmit information from javascript to the server

I am currently working on an ASP.NET MVC web application and have a query: If I have a strongly typed view and I submit it, the object (of the strongly type) will be filled and sent to the server. But what if one of the properties of the strongly typed i ...

javascriptjqueryasp.net-mvc

Expanding the table area in bootstrap

I am currently working on a video slider using bootstrap. I have added a table within the slider (carousel) and it is functioning perfectly. However, I am now looking to update the layout to resemble the image below. I have successfully applied the backgro ...

htmlcsstwitter-bootstraphtml-table

The npm install command can expose various vulnerabilities

Just starting to learn JAVASCRIPT, I ran the 'npm audit command' after encountering vulnerabilities in the npm install command. All I did was add functionality to my server/client project by incorporating HTTP requests (DELETE, POST) in Axios an ...

javascriptnode.jsexpressnpmaxios

New feature in jQuery inputmask enables placeholder text to be retained

I have integrated the inputmask feature from https://github.com/RobinHerbots/jquery.inputmask in my project, and I am applying the mask to all textboxes with the class "date". However, I am encountering a problem where if the user leaves one or more letter ...

javascriptjquery

Applying a CSS transition to transform properties excluding rotation effects

I'm looking to apply a transitional animation to an element's transform property without affecting the rotation. Here is the code snippet: <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js ...

javascriptjquerycsscss-transitions