如何解决Crossfade轮播功能不正确
我正在一个项目上,我需要使用引导程序。我想到了使用引导程序中的轮播进行交叉淡入淡出的幻灯片演示,以供用户查看随机公司的过去工作。我复制粘贴了代码,但无法获得预期的结果:
<!DOCTYPE html> <!-- -->
<html lang="en">
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<h1>John Doe Beauty Clinic</h1>
</body>
<div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="waxing.jpeg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="threading.jpeg" class="d-block w-100" alt="...">
</div>
<div class="carousel-item">
<img src="haircut.jpeg" class="d-block w-100" alt="...">
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">PrevIoUs</span>
</a>
<a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</html>
当我运行网站时,我得到了第一张图片,但是当我按下按钮进入下一步时,图片没有改变。我检查了它的用法,但找不到任何东西。
我看了其他与此类似的问题,但找不到任何答案。我以为也许我写错了img src,但这不是问题。
我想知道是否必须使用data-target
和data-slide-to
来完成这项工作,因为我看到使用该答案的答案,也许这只是一个好习惯。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。