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

寻龙剑侠 2025-04-25 16:08:54 12 阅读 前端

解决bootstrap的走马灯自动播放出现bootstrap-native-v4.js:171 Uncaught TypeError: Cannot read property 'classList' of undefined的问题。

1.问题描述

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

改造前:

"carouselExampleAutoplaying" class="carousel slide" data-bs-ride="carousel">
"carousel-inner">
"carousel-item active"> "..." class="d-block w-100" alt="...">
"carousel-item"> "..." class="d-block w-100" alt="...">
"carousel-item"> "..." class="d-block w-100" alt="...">

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

"carouselExampleAutoplaying" class="carousel slide carousel-fade" data-bs-ride="carousel" data-bs-theme="dark" data-interval="5000">
"carousel-indicators" id="carousel-indicators">
"carousel-inner" style="height: 400px;" id="carousel_inner">
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(``);
                            $inner.append(``) ;  
                        }

原因: $indicators.append(); 这一段代码导致了轮播无法正常自动播放,报错:

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(``); 

参考文章:

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

  2. bootstrap native github master carousel

标签: bootstrap

评论

评论先审后显;邮箱仅用于生成头像(MD5),不会公开显示