Munchkin
Reputation: 1085
Uncaught TypeError: Cannot read properties of null (reading 'classList') after one click or auto-scroll in the multi-carousel
So I've been following the official tutorial here and I require a slide indicator here as well so I just copied and modified the code from this example here.
My markup looks like this:
<div class="container my-5">
<!-- Section: Introduction -->
<section class="">
<p>Free example of carousel with multiple items built with the newest Bootstrap 5. Learn how to create a responsive carousel with many items inside.</p>
<p>
Detailed documentation and more examples you can find in our
<a href="https://mdbootstrap.com/docs/standard/components/carousel/" target="_blank"><strong>Carousel Docs</strong></a>.
</p>
<p>See also <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced mutli item carousel plugin</strong></a>.</p>
<hr class="mt-5">
<p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
<a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>
<a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
<a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>
<hr class="mb-5"/>
</section>
<!-- Section: Introduction -->
<!-- Section: Basic example -->
<section class="">
<p><strong>Basic example</strong></p>
<div class="container my-5">
<!-- Carousel wrapper -->
<div
id="carouselBasicExample"
class="carousel slide carousel-dark text-center carousel-multi-item"
data-ride="carousel"
data-mdb-ride="carousel"
>
<!-- Inner -->
<div class="carousel-inner py-4">
<ol class="carousel-indicators">
<li data-target="#carouselBasicExample" data-slide-to="0" class="active"></li>
<li data-target="#carouselBasicExample" data-slide-to="1"></li>
<li data-target="#carouselBasicExample" data-slide-to="2"></li>
<li data-target="#carouselBasicExample" data-slide-to="3"></li>
<li data-target="#carouselBasicExample" data-slide-to="4"></li>
<li data-target="#carouselBasicExample" data-slide-to="5"></li>
</ol>
<!-- Single item -->
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/181.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/182.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/183.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.daoisjoifjoidsafpijsadpoj
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/185.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/186.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/187.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/188.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/189.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Inner -->
</div>
<!-- Carousel wrapper -->
</div>
<!-- Controls -->
<div class="d-flex mb-4">
<button
class="carousel-control-prev justify-content-start"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true">b</span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next justify-content-end"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true">a</span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Section: Basic example -->
</div>
But it fails with the error Uncaught TypeError: Cannot read properties of null (reading 'classList') after one click/one auto scroll. It doesn't throw any errors or work when you click even more on it, weird...
- Also, don't I need to have two different versions - one for mobile and one for desktop for the indicators, since there will be different amounts due to the fact that the mobile view displays only a single slide?
The official documentation (API) is here but it didn't help me: https://mdbootstrap.com/docs/standard/components/carousel/#docsTabsAPI
Upvotes: 5
Views: 9068
Answers (5)
user22972397
Reputation: 1
For me it was the ... content in alt. I had configured the img src and left the alt as ... - when I gave those values eg alt="this or that", no Exception error anymore.
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="{{url_for('static', filename='images/defaults/cslide_1.png')}}" class="d-block w-100" alt="...">
<!-- causes exception -->
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='images/defaults/cslide_2.png')}}" class="d-block w-100" alt="any value configured">
<!--solved it for me -->
</div>
<div class="carousel-item">
<img src="{{url_for('static', filename='images/defaults/cslide_3.png')}}" class="d-block w-100" alt="anything but ...">
</div>
</div>
Upvotes: 0
Steven Brooks
Reputation: 11
I've just had the same issue recently and I managed to get around it by adding more buttons in the "carousel-indicators" div. By adding enough buttons to account for the images I have revolving in my carousel, I was able to make the error message vanish. Hope this helps!
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="6" aria-label="Slide 7"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="7" aria-label="Slide 8"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="8" aria-label="Slide 9"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="9" aria-label="Slide 10"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="10" aria-label="Slide 11"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="11" aria-label="Slide 12"></button>
</div>
Upvotes: 0
Mazhar Ali
Reputation: 366
The problem for me in bootstrap 5 was that I put 4 images in my carousel while the indicator buttons were only 3. Hence it was throwing error 'can not read properties of null, reading classList'.
Maybe this helps someone.
Upvotes: 1
Mike Davis
Reputation: 86
Not sure if you ever found a solution to this, but I think I did. Changing the data-target and data-slide-to to data-bs-target and data-bs-slide-to fixed this null dereference error. It'd be nice if Bootstrap put a null error check in there with a useful message.
<div class="carousel-indicators">
<button data-bs-target="#homeCarouselControls" data-bs-slide-to="0" class="active"></button>
<button data-bs-target="#homeCarouselControls" data-bs-slide-to="1"></button>
</div>
Upvotes: 7
Oris Sin
Reputation: 1217
I included the scripts inside the HTML content and it is working perfectly as per the example. I think you have something missing inside your HTML DOM tree which makes your code stop here Uncaught TypeError: Cannot read properties of null (reading 'classList')
It is possibly a closing div and therefore this is why your carousel.js breaks and doesn't continue on the next slide. From debugging a bit, I actually found it but in order to access the property of classList you had to put it like this classList[0]which normally isn't supposed to have this structure. It has to be just plain classList.remove(YOUR_CLASS)
You should set a breakpoint here inside this folder in order to get the info you actually need.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/3.11.0/mdb.min.js"></script>
<div class="container my-5">
<!-- Section: Introduction -->
<section class="">
<p>Free example of carousel with multiple items built with the newest Bootstrap 5. Learn how to create a responsive carousel with many items inside.</p>
<p>
Detailed documentation and more examples you can find in our
<a href="https://mdbootstrap.com/docs/standard/components/carousel/" target="_blank"><strong>Carousel Docs</strong></a>.
</p>
<p>See also <a target="_blank" href="https://mdbootstrap.com/docs/standard/plugins/multi-item-carousel/"><strong>Advanced mutli item carousel plugin</strong></a>.</p>
<hr class="mt-5">
<p>Built with <a target="_blank" href="https://mdbootstrap.com/docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
<a class="btn btn-primary me-2" href="https://mdbootstrap.com/docs/standard/getting-started/installation/" target="_blank" role="button">Download MDB UI KIT <i class="fas fa-download ms-2"></i></a>
<a class="btn btn-danger me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/" role="button">Learn more</a>
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap.com/docs/standard/getting-started/" role="button">Tutorials</a>
<a class="btn btn-dark me-2" target="_blank" href="https://github.com/mdbootstrap/mdb-ui-kit" role="button">GitHub <i class="fab fa-github ms-2"></i></a>
<hr class="mb-5"/>
</section>
<!-- Section: Introduction -->
<!-- Section: Basic example -->
<section class="">
<p><strong>Basic example</strong></p>
<div class="container my-5">
<!-- Carousel wrapper -->
<div
id="carouselBasicExample"
class="carousel slide carousel-dark text-center"
data-mdb-ride="carousel"
>
<!-- Controls -->
<div class="d-flex justify-content-center mb-4">
<button
class="carousel-control-prev position-relative"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next position-relative"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Inner -->
<div class="carousel-inner py-4">
<!-- Single item -->
<div class="carousel-item active">
<div class="container">
<div class="row">
<div class="col-lg-4">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/181.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/182.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/183.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/184.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/185.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/186.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Single item -->
<div class="carousel-item">
<div class="container">
<div class="row">
<div class="col-lg-4 col-md-12 mb-4 mb-lg-0">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/187.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/188.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
<div class="col-lg-4 mb-4 mb-lg-0 d-none d-lg-block">
<div class="card">
<img
src="https://mdbootstrap.com/img/new/standard/nature/189.jpg"
class="card-img-top"
alt="..."
/>
<div class="card-body">
<h5 class="card-title">Card title</h5>
<p class="card-text">
Some quick example text to build on the card title and
make up the bulk of the card's content.
</p>
<a href="#!" class="btn btn-primary">Button</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Carousel wrapper -->
</div>
<!-- Controls -->
<div class="d-flex mb-4">
<button
class="carousel-control-prev justify-content-start"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="prev"
>
<span class="carousel-control-prev-icon" aria-hidden="true">b</span>
<span class="visually-hidden">Previous</span>
</button>
<button
class="carousel-control-next justify-content-end"
type="button"
data-mdb-target="#carouselBasicExample"
data-mdb-slide="next"
>
<span class="carousel-control-next-icon" aria-hidden="true">a</span>
<span class="visually-hidden">Next</span>
</button>
</div>
</section>
<!-- Section: Basic example -->
</div>Upvotes: 2
Related Questions
- Getting Cannot read property 'offsetWidth' of undefined with bootstrap carousel script
- I don't know how to fix this error: Uncaught TypeError: Cannot read property 'classList' of undefined
- Start bootstrap carousel stopped on page load with interval false
- MultiItemCarousel working on CodePen and not on jsfiddle
- Cannot read property 'offsetWidth' of undefined with Bootstrap Carousel
- JS carousel - Uncaught SyntaxError: Unexpected identifier
- Issue related to bootstrap carousel
- uncaught TypeError: Cannot read property 'classList' of null
- Bootstrap carousel crashes when trying to skip index
- Created a carousel but errors if there is more than one. (fiddle included)