The carousel is malfunctioning and showing an error message stating it cannot read the property 'offsetWidth' of undefined

Having some trouble implementing a full-page landing image slider with Bootstrap. The console is showing an error message "Cannot read property 'offsetWidth' of undefined at ............"

.carousel-item {
  height: 100vh;
  min-height: 350px;
  background: no-repeat center center scroll;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
<header>
  <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol 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>
    </ol>
    <div class="carousel-inner" role="listbox">
      <!-- Slide One - Set the background image for this slide in the line below -->
      <div class="carousel-item active" style="background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
        <div class="carousel-caption d-none d-md-block">
          <h2 class="display-4">First Slide</h2>
          <p class="lead">This is a description for the first slide.</p>
        </div>
      </div>
      <!-- Slide Two - Set the background image for this slide in the line below -->
      <div class="carousel-item" style="background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
        <div class="carousel-caption d-none d-md-block">
          <h2 class="display-4">Second Slide</h2>
          <p class="lead">This is a description for the second slide.</p>
        </div>
      </div>
      <!-- Slide Three - Set the background image for this slide in the line below -->
      <div class="carousel-item"" style="background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
        <div class="carousel-caption d-none d-md-block">
          <h2 class="display-4">Third Slide</h2>
          <p class="lead">This is a description for the third slide.</p>
        </div>
      </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>
</header>

My goal is to have the full page image slider function without any errors.

javascriptbootstrap-4carousel

Answer №1

Give this snippet a shot.

<!DOCTYPE html>
<html lang="en" style="height: 100%; width: 100%">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body style="height: 100%; width: 100%">
    <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" style="height: 100%">
        <ol 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>
        </ol>
        <div class="carousel-inner" role="listbox" style="height: 100%">
          <!-- Slide One - Set the background image for this slide in the line below -->
          <div class="carousel-item active" style="height: 100%; background-image: url('https://source.unsplash.com/LAaSoL0LrYs/1920x1080')">
            <div class="carousel-caption d-none d-md-block">
              <h2 class="display-4">First Slide</h2>
              <p class="lead">This is a description for the first slide.</p>
            </div>
          </div>
          <!-- Slide Two - Set the background image for this slide in the line below -->
          <div class="carousel-item" style="height: 100%; background-image: url('https://source.unsplash.com/bF2vsubyHcQ/1920x1080')">
            <div class="carousel-caption d-none d-md-block">
              <h2 class="display-4">Second Slide</h2>
              <p class="lead">This is a description for the second slide.</p>
            </div>
          </div>
          <!-- Slide Three - Set the background image for this slide in the line below -->
          <div class="carousel-item" style="height: 100%; background-image: url('https://source.unsplash.com/szFUQoyvrxM/1920x1080')">
            <div class="carousel-caption d-none d-md-block">
              <h2 class="display-4">Third Slide</h2>
              <p class="lead">This is a description for the third slide.</p>
            </div>
          </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>
</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

Troubleshooting issues with ASP.NET bundling and minification when using Angular.js

After reviewing many questions on the same topic, none of them were able to solve my specific case. Our current challenge involves bundling and minifying AngularJs files within .Net code. The following code snippet shows how we are bundling our files insi ...

javascriptc#asp.netangularjsbundling-and-minification

Issue encountered with PouchDB: The error message reads as follows - TypeError: angular.factory is not a

Currently, I am delving into the realm of utilizing PouchDB within an AngularJS environment. My reference point is these guiding instructions located at https://github.com/wspringer/angular-pouchdb The stumbling block I face pertains to grasping the synta ...

javascriptangularjsangularjs-servicepouchdb

Having trouble accessing object properties fetched via API, receiving the error message "TypeError: Cannot read property '' of undefined" in Next.js with JavaScript

Encountering a unique issue specific to NextJs. Fetching data from an API using a custom hook and receiving an array of objects as the result. Successfully logging the entire result (array of objects). const myMovieGenreObjects = useFetchNavBarCategories( ...

javascriptreactjsarraysapinext.js

Problem with the visibility of Grid Layout

Trying to create a Quiz web application, I want the quiz container to be hidden with the CSS property display: none; until I click "start game." Once the game starts, the container should change to display: grid;. However, when I try to reveal the div, it ...

javascripthtmlcss

Setting up the customized filename for precompiled Handlebars templates

When compiling Handlebars templates with the NPM package, is there a way to manually adjust the name/index that is generated? In my experience using Handlebars in various environments like Rails, NodeJS, and PHP, I've observed that the generated temp ...

javascriptnpmhandlebars.js

Is it possible to bring in a `devDependency` into your code?

The Mobx DevTool's README instructs users to install it as a dev dependency, and then import it into their code. This approach raises concerns for me because devDependencies are typically reserved for tools used in the build process or managing end co ...

javascriptnpmpackage.json

Tips for transferring a function between stateful and stateless components

Looking to transfer a function from a stateful component to a stateless component, here's a snippet of the code. Below is the stateless code. const ProductsGridItem = props => { const { result } = props; const source = result._source; return ( ...

javascriptreactjs

What is the best way to create a drop-up feature for a Bootstrap navbar positioned at the bottom of the

I am experiencing some issues with my navbar. I have a dropdown menu in the third li element that does not seem to work properly. Despite adding the dropup class, it still fails to appear when I hover over it. <nav class="navbar navbar-expand-lg navb ...

htmlcsstwitter-bootstrapbootstrap-4

Steps for transforming an array into a complex array

Here is an array I have: [2, 1, 2, 1, 1, 1, 1, 1] I am looking for a way to create new arrays within the original array when the sum of values exceeds four. The desired result should look like this: [[2,1],[2,1,1],[1,1,1]] ...

javascriptarrays

Showing associated table information in Vue.js

Currently, I am diving into the world of vuejs and harnessing the power of Laravel for the backend API. Within my project, I have set up tables named articles and articles_translations, where their relationships are defined in their respective models. For ...

javascriptlaravelvue.js

Receiving object data from a client through a GET request on a Node server

What is the best way to transfer an object from a client to a Node.js server? The object I need to send has the following structure: var myobj = {}; myobj.title = "title1"; myobj.message = "message1"; I am attempting to send this object to the server in ...

javascriptjsonnode.jsajax

Preventing special characters in an input field using Angular

I am trying to ensure that an input field is not left blank and does not include any special characters. My current validation method looks like this: if (value === '' || !value.trim()) { this.invalidNameFeedback = 'This field cannot ...

javascripthtmlangularstring

Obtaining the accurate offsetTop and offsetLeft values for an element following a CSS3 rotation

Is there a method to accurately determine the offsetTop and offsetLeft values of an element post-transform rotation? Are there any lesser-known element properties that could be helpful in this scenario? Attached is an image that can provide further clari ...

javascriptcss

Generating a JavaScript array containing all elements belonging to a specific class name

As I work on my website, I am attempting to create an array from elements that have a specific class. This array should retrieve the videofile attribute value from all `a` tags with the class `videoLink`. The desired values in the final array should be: ...

javascriptjqueryarraysfunctional-programming

When the enter key is pressed, the anchor tag does not function properly after setting the tabindex value to "0" for the surrounding div element

Having an issue with Safari not focusing on my anchor element. I added tabindex="0" around the div to address this, but now the link doesn't work when pressing enter in any browser. Am I missing something here? <div class="used__button&quo ...

javascripthtmlcssaccessibility

Using the Google Maps API version 3 to add markers to a

I am experiencing an issue with Google Maps - I am unable to place markers on certain locations. My initial plan was to mark my current location and then add markers to other places, but unfortunately the markers for other locations are not appearing on ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Should I import a CSS file into a JavaScript file or link it to an HTML file?

Upon joining a new project, I noticed an interesting method for importing stylesheets. Instead of the usual HTML linking method, the stylesheet is imported into each page's JS file like this: import "../../style.css"; Usually, CSS styleshe ...

javascripthtmlcss

Chip component in Material UI for Meteor/React not recognizing the onRequestDelete method

I'm currently integrating Material UI's chip element into my application and as per the documentation onRequestDelete - Callback function triggered when the delete icon is clicked. If specified, the delete icon will be displayed. import React f ...

javascriptmeteorreactjsmaterial-ui

What is the best way to delay the loading of a JavaScript script on my website for 20 or 30 seconds

Is there a way to load the following JavaScript ad after 30 seconds on my WordPress site? <script type="text/javascript"> var uid = '219412'; var wid = '586053'; var pop_tag = document.createElement('script ...

javascript

Toggle the visibility of list elements individually with a click in a React application

I'm currently working on creating a list where clicking on the title will show/hide the description below each individual item. The functionality is partly there (clicking on a title shows all descriptions and clicking again hides them all), but I&apo ...

javascriptreactjs