Question

我试图在Bootstrap 4测试版中创建一个旋转木马，一切正常，但下一个箭头不在正确的位置，如果你使用彩色背景，你可以看到：它不在图像上。箭头也不会滑动图像。我试图复制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>

Answer 1

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

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

应该是：

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

Answer 2

这里有几点需要注意。

首先，当您将id的{{1}}设置为.carousel时，您应该在整个标记处跟进此更改。也就是说，您必须设置指标的ce属性，以及轮播控件的data-target值。后者是箭头！
其次，您没有在图像上看到箭头（或至少是右边的箭头），因为您已将图像的宽度设置为修复500px，而href填满了所有可用的宽度。这意味着图像没有填满旋转木马的宽度，但是右箭头粘在旋转木马的右侧。

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

＆＃13;

.carousel

＆＃13;

为什么不显示下一个箭头？

2 个答案: