0

我试图在 Bootstrap 4 beta 中创建一个轮播，一切正常，但下一个箭头不在正确的位置，如果你使用彩色背景，你可以看到：它不在图像上。箭头也不会滑动图像。我试图复制 w3schools 控件代码（您可以在此处找到：https ://www.w3schools.com/bootstrap4/bootstrap_carousel.asp ），但它没有用。之后，我搜索了一个错字，但没有找到。我可以请你帮忙吗？

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width initial-scale=1.0 shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4" crossorigin="anonymous"></script>
</head>
<body>


<div class="carousel slide" id="ce" data-ride="carousel">
    <!-- Indicators-->
    <ol class="carousel-indicators">
        <li data-target="#ce" data-slide-to="0" class="active"></li>
        <li data-target="ce" data-slide-to="1"></li>
    </ol>


    <!-- Inner -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img style="width:500px;" src="photo.jpeg">
        </div>

        <div class="carousel-item">
            <img style="width:500px;" src="https://static.pexels.com/photos/450301/pexels-photo-450301.jpeg">
        </div>
    </div>

    <!-- Carousel control -->
    <a class="carousel-control-prev" data-slide="prev" href="#carousel-example">
        <span class="carousel-control-prev-icon"></span>
    </a>

    <a class="carousel-control-next" href="#carousel-example" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>


</body>
</html>

4

2 回答 2

0

这里有几点需要注意。

  • 首先，由于您已将 的 设置id为.carousel，ce您应该在整个标记中跟进此更改。即，您必须设置data-target指标的属性，以及href轮播控件的值。后者是箭头！
  • 其次，您没有看到图像上方的箭头（或至少是右侧的箭头），因为您已将图像的宽度设置为固定 500 像素，而.carousel填充了所有可用宽度。这意味着图像没有填满轮播的宽度，但右箭头粘在轮播的右侧。

在下面的示例中，您还将看到一些关于我所做更改的评论。

<!-- Note `id="ce"`, all `data-target` and control `href` has to match this  -->
<div class="carousel slide" id="ce" data-ride="carousel">
    <!-- Indicators-->
    <ol class="carousel-indicators">
        <!-- Note `data-target="#ce"` -->
        <li data-target="#ce" data-slide-to="0" class="active"></li>
        <li data-target="#ce" data-slide-to="1"></li>
    </ol>

    <!-- Inner -->
    <div class="carousel-inner">
        <!--
        The size of `.carousel-item`s should be the same,
        so the first image now has the same proportion as the img in the secod slide.
        Additionally all images set to `width: 100%`.
        -->
        <div class="carousel-item active">
            <img class="w-100" src="http://via.placeholder.com/708x421/c1ae9f/ffffff?text=First+Photo">
        </div>
        <div class="carousel-item">
            <img class="w-100" src="https://static.pexels.com/photos/450301/pexels-photo-450301.jpeg">
        </div>
    </div>

    <!-- Carousel control -->
    <!-- Note `href="#ce"` too -->
    <a class="carousel-control-prev" href="#ce" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>

    <a class="carousel-control-next" href="#ce" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

于 2018-01-17T21:55:18.980 回答
0

您是否缺少有序列表中第二个 li 元素中的 # 符号？

<li data-target="ce" data-slide-to="1"></li>

应该：

<li data-target="#ce" data-slide-to="1"></li>
于 2018-01-13T23:48:08.420 回答