从Boostrap4升级到boostrap5-旋转木马在boostrap5中不起作用

bkkx9g8r  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(301)

carousel在boostrap5中不起作用，我正在将我的项目从Boostrap4升级到5，在carousel中，当我转到上一张幻灯片并单击“下一页”或“上一页”按钮时，它不滑动，我必须再次刷新我的页面，以便加载滑块。下面是我进入控制台的错误。有人能帮忙吗

  1. Uncaught TypeError: Cannot read property 'classList' of null
  2.     at Carousel._setActiveIndicatorElement (carousel.js:359)
  3.     at Carousel._slide (carousel.js:430)
  4.     at Carousel.next (carousel.js:142)
  5.     at Function.carouselInterface (carousel.js:521)
  6.     at HTMLButtonElement.dataApiClickHandler (carousel.js:551)
  7.     at HTMLDocument.handler (event-handler.js:120)

下面是我的代码

  1. <div class="carousel slide" id="alertsCarousel" data-bs-ride="carousel">
  2.     <ol class="carousel-indicators" id="alertsCarouselIndicators">
  3.         <li data-bs-target="#alertsCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></li>
  4.         @for (var a = 0; a < ViewBag.alertsList.Count; a++)
  5.         {
  6.             <li data-bs-target="#alertsCarousel" data-bs-slide-to="@a+1" class="" aria-label="Slide 2"></li>
  7.         }
  8.     </ol>
  9.     <div class="carousel-inner" id="alertsCarouselInnerElements">
  10.         <div class="carousel-item active" id="totalAlertsGlobalItem">
  11.             <div class="card" id="alertsSummaryPanel">
  12.                 <div id="alertsSummaryPanelHeading" class="card-header">
  13.                     <h2 class="card-title">
  14.                         <span class="fa fa-tags"></span> Global Alerts Summary
  15.                     </h2>
  16.                 </div>
  17.                 <div id="alertsSummaryPanelBody" class="card-body">
  18.                     <div id="alertsSummaryContent" class="row">
  19.                         <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  20.                             <div id="tableDiv1" class="table-sm offset-lg-2 col-lg-4">
  21.                                 <table class="table" style="font-size: smaller; align-items: center;">
  22.                                     <thead>
  23.                                         <tr>
  24.                                             <th class="table-info">
  25.                                                 SITES
  26.                                             </th>
  27.                                             <th class="table-info">
  28.                                                 TOTAL ALERTS
  29.                                             </th>
  30.                                         </tr>
  31.                                     </thead>
  32.                                     <tbody style="font-size: small;">
  33.                                         @for (var i = 0; i < sitesPA.Length / 2; i++)
  34.                                         {
  35.                                             if (sitesPA[i].PresentAlerts != 0)
  36.                                             {
  37.                                                 <tr>
  38.                                                     @if (sitesPA[i].PresentAlerts < 20)
  39.                                                     {
  40.                                                         <td class="table-warning">
  41.                                                             @sitesPA[i].SiteName
  42.                                                         </td>
  43.                                                         <td class="table-warning">
  44.                                                             @sitesPA[i].PresentAlerts
  45.                                                         </td>
  46.                                                     }
  47.                                                     else
  48.                                                     {
  49.                                                         <td class="table-danger">
  50.                                                             @sitesPA[i].SiteName
  51.                                                         </td>
  52.                                                         <td class="table-danger">
  53.                                                             @sitesPA[i].PresentAlerts
  54.                                                         </td>
  55.                                                     }
  56.                                                 </tr>
  57.                                             }
  58.                                         }
  59.                                     </tbody>
  60.                                 </table>
  61.                             </div>
  62.                             <div id="tableDiv2" class="table-sm col-lg-4">
  63.                                 <table class="table" style="font-size: smaller; align-items: center;">
  64.                                     <thead>
  65.                                         <tr>
  66.                                             <th class="table-info">
  67.                                                 SITES
  68.                                             </th>
  69.                                             <th class="table-info">
  70.                                                 TOTAL ALERTS
  71.                                             </th>
  72.                                         </tr>
  73.                                     </thead>
  74.                                     <tbody style="font-size: small;">
  75.                                         @for (var j = sitesPA.Length / 2; j < sitesPA.Length; j++)
  76.                                         {
  77.                                             if (sitesPA[j].PresentAlerts != 0)
  78.                                             {
  79.                                                 <tr>
  80.                                                     @if (sitesPA[j].PresentAlerts < 20)
  81.                                                     {
  82.                                                         <td class="table-warning">
  83.                                                             @sitesPA[j].SiteName
  84.                                                         </td>
  85.                                                         <td class="table-warning">
  86.                                                             @sitesPA[j].PresentAlerts
  87.                                                         </td>
  88.                                                     }
  89.                                                     else
  90.                                                     {
  91.                                                         <td class="table-danger">
  92.                                                             @sitesPA[j].SiteName
  93.                                                         </td>
  94.                                                         <td class="table-danger">
  95.                                                             @sitesPA[j].PresentAlerts
  96.                                                         </td>
  97.                                                     }
  98.                                                 </tr>
  99.                                             }
  100.                                         }
  101.                                     </tbody>
  102.                                 </table>
  103.                             </div>
  104.                         </div>
  105.                     </div>
  106.                 </div>
  107.             </div>
  108.         </div>
  109.         @for (var b = 0; b < ViewBag.alertsList.Count; b++)
  110.         {
  111.             <div class="carousel-item" id="totalAlerts-@alertsListCRT[b][0]-Item">
  112.                 <div class="card" id="@alertsListCRT[b][0]-alertsSummaryPanel">
  113.                     <div id="@alertsListCRT[b][0]-alertsSummaryPanelHeading" class="card-header">
  114.                         <h2 class="card-title">
  115.                             <span class="fa fa-tag"></span> @alertsListCRT[b][0] Alerts Summary
  116.                         </h2>
  117.                     </div>
  118.                     <div id="alertsSummaryPanelBody" class="card-body">
  119.                         <div id="alertsSummaryContent" class="row">
  120.                             <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
  121.                                 <div id="tableDiv1" class="table-sm offset-lg-3 col-lg-6">
  122.                                     <table class="table" style="font-size: small; align-items: center; text-align: center;">
  123.                                         <thead>
  124.                                             <tr>
  125.                                                 <th class="table-info" style="text-align: center;">
  126.                                                     Critical Alerts
  127.                                                 </th>
  128.                                                 <th class="table-info" style="text-align: center;">
  129.                                                     Warning Alerts
  130.                                                 </th>
  131.                                                 <th class="table-info" style="text-align: center;">
  132.                                                     Total Alerts
  133.                                                 </th>
  134.                                             </tr>
  135.                                         </thead>
  136.                                         <tbody style="text-align: center; font-size: small;">
  137.                                             <tr>
  138.                                                 <td class="table-danger">
  139.                                                     @alertsListCRT[b][2]
  140.                                                 </td>
  141.                                                 <td class="table-warning">
  142.                                                     @alertsListCRT[b][3]
  143.                                                 </td>
  144.                                                 <td class="table-active">
  145.                                                     @alertsListCRT[b][4]
  146.                                                 </td>
  147.                                             </tr>
  148.                                         </tbody>
  149.                                     </table>
  150.                                 </div>
  151.                             </div>
  152.                             @if (ViewBag.alertsList[b][2] > 0)
  153.                             {
  154.                                 <div class="offset-lg-3 col-lg-6">
  155.                                     <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>
  156.                                 </div>
  157.                                 <div class="offset-lg-5 col-lg-4" id="presentAlertsButton-@alertsListCRT[b][0]">
  158.                                     <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>
  159.                                 </div>
  160.                                 <div class="col-lg-12">
  161.                                     <br />
  162.                                     <br />
  163.                                 </div>
  164.                             }
  165.                             else
  166.                             {
  167.                                 <div class="offset-lg-5 col-lg-4" id="presentAlertsButton-@alertsListCRT[b][0]">
  168.                                     <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>
  169.                                 </div>
  170.                                 <div class="col-lg-12">
  171.                                     <br />
  172.                                     <br />
  173.                                 </div>
  174.                             }
  175.                         </div>
  176.                     </div>
  177.                 </div>
  178.             </div>
  179.         }
  180.     </div>
  181.     <button class="carousel-control-prev" type="button" data-bs-target="#alertsCarousel" data-bs-slide="prev">
  182.         <span class="carousel-control-prev-icon" aria-hidden="true"></span>
  183.         <span class="visually-hidden">Previous</span>
  184.     </button>
  185.     <button class="carousel-control-next" type="button" data-bs-target="#alertsCarousel" data-bs-slide="next">
  186.         <span class="carousel-control-next-icon" aria-hidden="true"></span>
  187.         <span class="visually-hidden">Next</span>
  188.     </button>
  189. </div>
jqueryHtmlbootstrap-4bootstrap-5

暂无答案！

目前还没有任何答案，快来回答吧！

我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com