carousel在boostrap5中不起作用，我正在将我的项目从Boostrap4升级到5，在carousel中，当我转到上一张幻灯片并单击“下一页”或“上一页”按钮时，它不滑动，我必须再次刷新我的页面，以便加载滑块。下面是我进入控制台的错误。有人能帮忙吗
Uncaught TypeError: Cannot read property 'classList' of null
at Carousel._setActiveIndicatorElement (carousel.js:359)
at Carousel._slide (carousel.js:430)
at Carousel.next (carousel.js:142)
at Function.carouselInterface (carousel.js:521)
at HTMLButtonElement.dataApiClickHandler (carousel.js:551)
at HTMLDocument.handler (event-handler.js:120)下面是我的代码
<div class="carousel slide" id="alertsCarousel" data-bs-ride="carousel">
<ol class="carousel-indicators" id="alertsCarouselIndicators">
<li data-bs-target="#alertsCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></li>
@for (var a = 0; a < ViewBag.alertsList.Count; a++)
{
<li data-bs-target="#alertsCarousel" data-bs-slide-to="@a+1" class="" aria-label="Slide 2"></li>
}
</ol>
<div class="carousel-inner" id="alertsCarouselInnerElements">
<div class="carousel-item active" id="totalAlertsGlobalItem">
<div class="card" id="alertsSummaryPanel">
<div id="alertsSummaryPanelHeading" class="card-header">
<h2 class="card-title">
<span class="fa fa-tags"></span> Global Alerts Summary
</h2>
</div>
<div id="alertsSummaryPanelBody" class="card-body">
<div id="alertsSummaryContent" class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="tableDiv1" class="table-sm offset-lg-2 col-lg-4">
<table class="table" style="font-size: smaller; align-items: center;">
<thead>
<tr>
<th class="table-info">
SITES
</th>
<th class="table-info">
TOTAL ALERTS
</th>
</tr>
</thead>
<tbody style="font-size: small;">
@for (var i = 0; i < sitesPA.Length / 2; i++)
{
if (sitesPA[i].PresentAlerts != 0)
{
<tr>
@if (sitesPA[i].PresentAlerts < 20)
{
<td class="table-warning">
@sitesPA[i].SiteName
</td>
<td class="table-warning">
@sitesPA[i].PresentAlerts
</td>
}
else
{
<td class="table-danger">
@sitesPA[i].SiteName
</td>
<td class="table-danger">
@sitesPA[i].PresentAlerts
</td>
}
</tr>
}
}
</tbody>
</table>
</div>
<div id="tableDiv2" class="table-sm col-lg-4">
<table class="table" style="font-size: smaller; align-items: center;">
<thead>
<tr>
<th class="table-info">
SITES
</th>
<th class="table-info">
TOTAL ALERTS
</th>
</tr>
</thead>
<tbody style="font-size: small;">
@for (var j = sitesPA.Length / 2; j < sitesPA.Length; j++)
{
if (sitesPA[j].PresentAlerts != 0)
{
<tr>
@if (sitesPA[j].PresentAlerts < 20)
{
<td class="table-warning">
@sitesPA[j].SiteName
</td>
<td class="table-warning">
@sitesPA[j].PresentAlerts
</td>
}
else
{
<td class="table-danger">
@sitesPA[j].SiteName
</td>
<td class="table-danger">
@sitesPA[j].PresentAlerts
</td>
}
</tr>
}
}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
@for (var b = 0; b < ViewBag.alertsList.Count; b++)
{
<div class="carousel-item" id="totalAlerts-@alertsListCRT[b][0]-Item">
<div class="card" id="@alertsListCRT[b][0]-alertsSummaryPanel">
<div id="@alertsListCRT[b][0]-alertsSummaryPanelHeading" class="card-header">
<h2 class="card-title">
<span class="fa fa-tag"></span> @alertsListCRT[b][0] Alerts Summary
</h2>
</div>
<div id="alertsSummaryPanelBody" class="card-body">
<div id="alertsSummaryContent" class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div id="tableDiv1" class="table-sm offset-lg-3 col-lg-6">
<table class="table" style="font-size: small; align-items: center; text-align: center;">
<thead>
<tr>
<th class="table-info" style="text-align: center;">
Critical Alerts
</th>
<th class="table-info" style="text-align: center;">
Warning Alerts
</th>
<th class="table-info" style="text-align: center;">
Total Alerts
</th>
</tr>
</thead>
<tbody style="text-align: center; font-size: small;">
<tr>
<td class="table-danger">
@alertsListCRT[b][2]
</td>
<td class="table-warning">
@alertsListCRT[b][3]
</td>
<td class="table-active">
@alertsListCRT[b][4]
</td>
</tr>
</tbody>
</table>
</div>
</div>
@if (ViewBag.alertsList[b][2] > 0)
{
<div class="offset-lg-3 col-lg-6">
<iframe src="@Url.Action("CriticalAlerts", new { id = alertsListCRT[b][1], emailEntryTime = alertsListCRT[b][5] })" scrolling="no" style="width: 100%; height: 300px; border: hidden; background-color: #dfdfdf;"></iframe>
</div>
<div class="offset-lg-5 col-lg-4" id="presentAlertsButton-@alertsListCRT[b][0]">
<a class="btn btn-danger" data-bs-toggle="tooltip" title="Click for Report" data-placement="right" href="@Url.Action("PresentAlerts", "ReportDetails", new { id = alertsListCRT[b][1], eet = alertsListCRT[b][5] })">Get Present Alerts Report</a>
</div>
<div class="col-lg-12">
<br />
<br />
</div>
}
else
{
<div class="offset-lg-5 col-lg-4" id="presentAlertsButton-@alertsListCRT[b][0]">
<a class="btn btn-danger" data-bs-toggle="tooltip" title="Click for Report" data-placement="right" href="@Url.Action("PresentAlerts", "ReportDetails", new { id = alertsListCRT[b][1], eet = alertsListCRT[b][5] })">Get Present Alerts Report</a>
</div>
<div class="col-lg-12">
<br />
<br />
</div>
}
</div>
</div>
</div>
</div>
}
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#alertsCarousel" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#alertsCarousel" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
暂无答案！
目前还没有任何答案，快来回答吧！