bootstrap carousel.js:275 Uncaught TypeError: Cannot read properties of null (reading 'classList')

bootstrap CSS
作者:dulucy
发布时间:2025-04-25 16:08:54
bootstrap carousel.js:275  Uncaught TypeError: Cannot read properties of null (reading 'classList')

1.问题描述

在使用Bootstrap的走马灯功能时,为了实现自动播放,对官网的例子进行了改造如下

改造前

<div id="carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
    <div class="carousel-item">
      <img src="..." class="d-block w-100" alt="...">
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying" 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="#carouselExampleAutoplaying" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">Next</span>
  </button>
</div>

改造后:将自动播放和指示器用在了一起

<div id="carouselExampleAutoplaying"  class="carousel slide carousel-fade" data-bs-ride="carousel"
                        data-bs-theme="dark" data-interval="5000">
<div class="carousel-indicators" id="carousel-indicators"></div>
 <div class="carousel-inner" style="height: 400px;" id="carousel_inner"></div>
  <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleAutoplaying"  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="#carouselExampleAutoplaying" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
    </button>
</div>
const $indicators = $('#carousel_indicators').empty();
                    const $inner = $('#carousel_inner').empty();
                    let result = response.data;
                    for (let i = 0; i < result.length; i++) {
                        let obj=result[i];
                        if(obj.cover!=undefined || obj.cover!=''){
                            $indicators.append(`<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="${i}"
                                class="" aria-current="true" aria-label="Slide ${i+1}"></button>`);
                            $inner.append(`<div class="carousel-item ${i== 0 ?'':'active' }" data-bs-interval="5000" style="height: 400px;">
                                <img src="${obj.cover || './images/logo.jpg'}" class="d-block w-100" alt="${obj.title}"
                                    style="width: 100%; height: 100%;object-fit: cover;">
                                <div class="carousel-caption d-none d-md-block">
                                    <p class="h3">${obj.title}</p>
                                    <button type="button" class="btn btn-link"
                                        onclick="window.open('${baseUrl+'/html/'+obj.article_url}', '_self')">阅读更多</button>
                                </div>
                            </div>`) ;  
                        }

原因: $indicators.append(<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="${i}" class="" aria-current="true" aria-label="Slide ${i+1}"></button>); 这一段代码导致了轮播无法正常自动播放,报错:

bootstrap-native-v4.js:171 Uncaught TypeError: Cannot read property 'classList' of undefined
    at removeClass (bootstrap-native-v4.js:171)
    at Carousel.slideTo (bootstrap-native-v4.js:657)
    at bootstrap-native-v4.js:592

2.解决办法

去掉 下面代码(指示器的代码)即可

<div class="carousel-indicators" id="carousel-indicators"></div>
以及
$indicators.append(`<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="${i}" class="" aria-current="true" aria-label="Slide ${i+1}"></button>`); 

参考文章

  1. 轮播:无法读取 undefined 的属性 'classList' ·问题 #267 ·dnp/bootstrap.native

  2. bootstrap native github master carousel