微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Crossfade轮播功能不正确

如何解决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-targetdata-slide-to来完成这项工作,因为我看到使用该答案的答案,也许这只是一个好习惯。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。