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>`);
参考文章:
轮播:无法读取 undefined 的属性 'classList' ·问题 #267 ·dnp/bootstrap.native
bootstrap native github master carousel