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="/" target="_blank"><strong>Carousel Docs</strong></a>.
</p>
<p>See also <a target="_blank" href="/"><strong>Advanced mutli item carousel plugin</strong></a>.</p>
<hr class="mt-5">
<p>Built with <a target="_blank" href="/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
<a class="btn btn-primary me-2" href="/" 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="/" role="button">Learn more</a>
<a class="btn btn-success me-2" target="_blank" href="/" role="button">Tutorials</a>
<a class="btn btn-dark me-2" target="_blank" href="; 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=".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=".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=".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=".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=".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=".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=".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=".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=".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:
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./docs/standard/ponents/carousel/" target="_blank"><strong>Carousel Docs</strong></a>.
</p>
<p>See also <a target="_blank" href="https://mdbootstrap./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./docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
<a class="btn btn-primary me-2" href="https://mdbootstrap./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./docs/standard/" role="button">Learn more</a>
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap./docs/standard/getting-started/" role="button">Tutorials</a>
<a class="btn btn-dark me-2" target="_blank" href="https://github./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./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./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./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./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./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./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./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./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./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./docs/standard/ponents/carousel/#docsTabsAPI
Share Improve this question edited Mar 29, 2022 at 13:46 Munchkin asked Mar 28, 2022 at 11:47 MunchkinMunchkin 1,0855 gold badges30 silver badges64 bronze badges5 Answers
Reset to default 7Not 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>
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./ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare./ajax/libs/mdb-ui-kit/3.11.0/mdb.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare./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./docs/standard/ponents/carousel/" target="_blank"><strong>Carousel Docs</strong></a>.
</p>
<p>See also <a target="_blank" href="https://mdbootstrap./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./docs/standard/">Material Design for Bootstrap</a> - free and powerful Bootstrap UI KIT</p>
<a class="btn btn-primary me-2" href="https://mdbootstrap./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./docs/standard/" role="button">Learn more</a>
<a class="btn btn-success me-2" target="_blank" href="https://mdbootstrap./docs/standard/getting-started/" role="button">Tutorials</a>
<a class="btn btn-dark me-2" target="_blank" href="https://github./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./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./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./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./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./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./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./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./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./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>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.
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>
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>