Uncaught TypeError: Cannot read properties of null (reading 'classList') after one click or auto-scroll in the multi-carousel
Uncaught TypeError: Cannot read properties of null (reading 'classList') after one click or auto-scroll in the multi-carousel
所以我一直在关注官方教程here and I require a slide indicator here as well so I just copied and modified the code from this example here。
我的标记如下所示：
<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>
但是在 click/one 自动滚动后失败并显示错误 Uncaught TypeError: Cannot read properties of null (reading 'classList')。当你点击更多它时它不会抛出任何错误或工作，奇怪......
- 此外，我不需要有两个不同的版本 - 一个用于移动设备，一个用于桌面设备，因为移动设备视图仅显示一张幻灯片，因此数量会有所不同？
官方文档 (API) 在这里，但对我没有帮助：https://mdbootstrap.com/docs/standard/components/carousel/#docsTabsAPI
我将脚本包含在 HTML 内容中，它按照示例完美运行。我认为你的 HTML DOM 树中缺少某些东西，这使得你的代码停在这里 Uncaught TypeError: Cannot read properties of null (reading 'classList')
它可能是结束语 div，因此这就是为什么您的 carousel.js 中断并且无法继续下一张幻灯片的原因。通过一些调试，我实际上找到了它，但是为了访问 classList 的 属性，你必须像这样放置它 classList[0]，通常不应该有这个结构。它必须是简单的 classList.remove(YOUR_CLASS)
您应该在此文件夹内设置一个断点，以获取您实际需要的信息。
<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>
所以我一直在关注官方教程here and I require a slide indicator here as well so I just copied and modified the code from this example here。
我的标记如下所示：
<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>
但是在 click/one 自动滚动后失败并显示错误 Uncaught TypeError: Cannot read properties of null (reading 'classList')。当你点击更多它时它不会抛出任何错误或工作，奇怪......
- 此外，我不需要有两个不同的版本 - 一个用于移动设备，一个用于桌面设备，因为移动设备视图仅显示一张幻灯片，因此数量会有所不同？
官方文档 (API) 在这里，但对我没有帮助：https://mdbootstrap.com/docs/standard/components/carousel/#docsTabsAPI
我将脚本包含在 HTML 内容中，它按照示例完美运行。我认为你的 HTML DOM 树中缺少某些东西，这使得你的代码停在这里 Uncaught TypeError: Cannot read properties of null (reading 'classList')
它可能是结束语 div，因此这就是为什么您的 carousel.js 中断并且无法继续下一张幻灯片的原因。通过一些调试，我实际上找到了它，但是为了访问 classList 的 属性，你必须像这样放置它 classList[0]，通常不应该有这个结构。它必须是简单的 classList.remove(YOUR_CLASS)
您应该在此文件夹内设置一个断点，以获取您实际需要的信息。
<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>