javascript - Bootstrap 的轮播所需的依赖项
问题描述
当我只想使用 Carousel 功能时,需要包含哪些 JavaScript 依赖项?这意味着我不想使用bootstrap.js
,只是JS
轮播(carousel.js
,...)所必需的。
设置代码(关于文档)是:
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
但显然这Bootstrap 5
部分丢失了,因为我得到了错误:
(index):511 Uncaught ReferenceError: bootstrap is not defined
我似乎在 Bootstrap 的官方文档和其他任何地方都找不到此信息。
解决方案
例如,如果您包含引导程序包,我不会给出错误。
所以你一定没有包含 popper 或 jquery 或 bootstrap(.min).js
和:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
var myCarousel = document.querySelector('#myCarousel')
var carousel = new bootstrap.Carousel(myCarousel)
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div id="carouselExampleDark" class="carousel carousel-dark slide">
<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">
<div class="carousel-item active" data-bs-interval="10000">
<img src="https://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-none 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://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-none 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://via.placeholder.com/150" class="d-block w-100" alt="...">
<div class="carousel-caption d-none 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>
推荐阅读
- node.js - 为什么 Next.js 将静态文件作为参数传递给 url?
- blazor - 错误 CS1660:无法将 lambda 表达式转换为类型“bool”,因为它不是委托类型
- python - 使用 mypy 扫描包会在不同的机器上产生不同的结果
- wordpress - Woo-commerce:移动设备上的 2 列产品间距不正确
- python - 是否可以在 cassandra 中使用 uuid 创建表?
- powershell - powershell 如果检查多个文件的条件可用
- intellij-idea - 不能用ideaVim逐行粘贴我复制的内容
- javascript - 使用 Sequelize 多次加入同一个表
- mongodb - 是否可以在使用副本集部署后将 Sharding 应用于 Mongo DB?
- php - PHP 根据日期将活动排序到正确的数组中