英文:
How to fix slideshow?
问题
我试图在我的index.html上创建一个卡片幻灯片（轮播）。我目前的代码将五张卡片垂直堆叠在一起，带有可点击的箭头，但箭头没有任何功能。有人知道如何使一次只显示一张卡片，并可以点击切换到下一张吗？
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="card active" style="width: 12rem;">
<img src="https://static.americasbestracing.net/s3fs-public/styles/large/public/reylu-gutierrez.jpg?KHONSa1SS2GQbZtqmIed8QZzxaE.XX.4&itok=AKl_nQxN" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Reylu Gutierrez.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/eric-cancel.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Eric Cancel.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/manuel-franco.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Manuel Franco.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Joel Rosario.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://live.staticflickr.com/65535/43429236045_546119af43_b.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Andre Worrie.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
我有CSS和JS源文件。我的JS文件包含以下行：
const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
interval: 2000,
touch: false
})
控制台日志中显示"bootstrap未定义"是在const carousel那一行吗？如果是这样，可能是因为你没有正确引入Bootstrap库。确保你在HTML文档中引入了Bootstrap的CSS和JS文件。你可以像这样引入它们：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
请注意，你需要使用适用于你的项目的Bootstrap版本，上述示例使用的是Bootstrap 4.5.2的CDN链接。确保链接正确，以便Bootstrap库被正确加载。
英文:
I'm trying to have a slideshow (carousel) of cards on my index.html.
The code I currently have presents all five cards vertically stacked, with clickable arrows that don't do anything. Anyone know how to make it so one card is shown at a time and can be clicked on to the next?
<div id="carouselExample" class="carousel slide">
<div class="carousel-inner">
<div class="card active" style="width: 12rem;">
<img src="https://static.americasbestracing.net/s3fs-public/styles/large/public/reylu-gutierrez.jpg?KHONSa1SS2GQbZtqmIed8QZzxaE.XX.4&itok=AKl_nQxN" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Reylu Gutierrez.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/eric-cancel.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Eric Cancel.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/manuel-franco.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Manuel Franco.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Joel Rosario.</p>
</div>
</div>
<div class="card" style="width: 12rem;">
<img src="https://live.staticflickr.com/65535/43429236045_546119af43_b.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Andre Worrie.</p>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExample" 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="#carouselExample" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
I have the CSS and JS sources. My js file has these lines
const myCarouselElement = document.querySelector('#myCarousel')
const carousel = new bootstrap.Carousel(myCarouselElement, {
interval: 2000,
touch: false
})
Console log says bootstrap is not defined in the const carousel line?
答案1
得分: 1
好的，在Bootstrap中，您必须遵循提供的模板，请参阅此链接：https://getbootstrap.com/docs/5.2/components/carousel/
您忘记了添加 class="carousel-item"，所以应该像这样：
<div class="card carousel-item " style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Joel Rosario。</p>
</div>
</div>
英文:
okay in bootstrap you must follow template provide ,see this https://getbootstrap.com/docs/5.2/components/carousel/
you forget take class= "carousel-item"
so like this
<div class="card carousel-item " style="width: 12rem;">
<img src="https://www.nyra.com/uploads/profile-images/joel-rosario.jpg" class="card-img-top" alt="...">
<div class="card-body">
<p class="card-text">Joel Rosario.</p>
</div>
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论