如何解决bootstrap 5 滑块间隔无法正常工作
bootstrap 5 滑块:我手动设置 interval: 1000
毫秒,
但第一张幻灯片需要超过 1000
毫秒,然后其他幻灯片迭代没问题.. & 每次迭代结束第一张幻灯片延迟超过 1000
毫秒。
我该如何解决? 有人能帮我弄清楚吗..提前致谢
下面的代码
var myCarousel = document.querySelector('#carouselExampleDark')
var carousel = new bootstrap.Carousel(myCarousel,{
interval: 1000,})
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>
<div class="carousel-inner" style="height: 300px;">
<div class="carousel-item active" data-bs-interval="10000">
<img src="https://picsum.photos/seed/picsum/200/300" class="d-block w-100" alt="...">
<div class="carousel-caption d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>
<div class="carousel-item" data-bs-interval="2000">
<img src="https://picsum.photos/200/300?grayscale" class="d-block w-100" alt="...">
<div class="carousel-caption d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>
<div class="carousel-item">
<img src="https://picsum.photos/200/300/?blur" class="d-block w-100" alt="...">
<div class="carousel-caption d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" 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="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
解决方法
BS5 的 Carousel 的代码规定,如果元素有 data-bs-interval
,则使用该值,否则使用默认值。默认值为 5000
,但如果您使用一个值对其进行实例化(就像您对 interval: 1000
所做的那样),则使用该值。
您可以添加:
- 将
data-bs-interval="1000"
添加到每个 carousel-item CSS,并从 JS 中删除实例化器,或 - 从现有的 CSS 代码中删除
data-bs-interval=
并将interval: 1000
保留在 JS 中
出于兴趣 - carousel.js
中进行设置的代码(从 Github 中提取):
_updateInterval() {
const element = this._activeElement || SelectorEngine.findOne(SELECTOR_ACTIVE_ITEM,this._element)
if (!element) {
return
}
const elementInterval = Number.parseInt(element.getAttribute('data-bs-interval'),10)
if (elementInterval) {
this._config.defaultInterval = this._config.defaultInterval || this._config.interval
this._config.interval = elementInterval
} else {
this._config.interval = this._config.defaultInterval || this._config.interval
}
}
,
你可以简单地使用 data-bs-interval
属性,就像这样
<div id="carouselExampleIndicators" class="carousel slide" data-bs-ride="carousel" data-bs-interval="10000">
这里我将间隔设置为 10 秒,因此它比默认的 bootstrap 5 间隔(即 5 秒)长 2 倍
,我遇到了同样的问题。 对我来说,当我将 data-interval="xxx" 直接放置到主 div 时,它工作正常。见示例:
<div id="carouselExampleControls" data-interval=10000 class="carousel slide" data-ride="carousel">
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。