时间戳

首页 > 解决方案 > 引导轮播不起作用，在一列中显示图片

jquery - 引导轮播不起作用，在一列中显示图片

问题描述

我想编写自己的网站，但无法在我的登录页面上添加轮播。它应该是一个全屏轮播，通过单击或几秒钟后它们自己滑动的图像依次显示 3 个不同的图像。我已经通过使用他们的轮播插件来使用引导程序的帮助，并且所做的一切都与他们的描述中所说的完全一样，但是我的轮播不起作用。它通过向下滑动页面在列中显示我的图片。我不知道我做错了什么。可以请人帮助我吗？

我的代码：

<head>
<meta charset="UTF-8">
    <title>Carousel_selftest</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="carousel_selftest.css">
</head>

<body>
    <div id="mycarousel" class="carousel slide" data-ride="carousel">
        <ol class="carousel-indicators">
            <li data-target="#mycarousel" data-slide-to="0" class="active"></li>
            <li data-target="#mycarousel" data-slie-to="1"></li>
            <li data-target="#mycarousel" data-slie-to="2"></li>
        </ol>

    <div class="carousel-inner">
        <div class="item active">
            <img src="Mockup_Magazin.png" alt="project1" width="1680px" height="1383,53px">
        </div>

        <div class="item2">
            <img src="infografic_1.png" alt="project2" width="1680px" height="1383,53px">
        </div>

        <div class="item3">
            <img src="PEVUO01.png" alt="project3" width="1680px" height="1383,53px">
        </div>
    </div>

    <a class="left-carousel-control" href="#mycarousel" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left"></span>
        <span class="sr-only">previous</span>
    </a>
    <a class="right-carousel-control" href="#mycarousel" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right"></span>
        <span class="sr-only">next</span>
    </a>
    </div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>
</html>

在我的CSS中，我只添加了这个

@charset "UTF-8";
/* CSS Document */
.container
{
    display: grid;
    margin-left: 0px;
    margin-right: 0px;
}

.mycarousel
{
    width: 50%;
    height: 632px;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

标签： jqueryhtmlcssbootstrap-4carousel

解决方案

您标记 bootstrap-4 但在您的代码中使用 bootstrap-3 ！！！

在 bootstrap-3 中使用此链接更正您的核心 w3schools_bootstrap_carousel

推荐阅读