为什么下一个箭头没有显示？

Question

I was trying to create a carousel in Bootstrap 4 beta, everything worked but the next arrow wasn't in the right position, if you use a colored background, you can see that: it's not on the image. 我试图在Bootstrap 4 beta中创建一个轮播，一切正常，但是下一个箭头不在正确的位置，如果使用彩色背景，您会看到：它不在图像上。 Arrows also don't slide images. 箭头也不会滑动图像。 I tried to copy w3schools controls code(which you can find here: https://www.w3schools.com/bootstrap4/bootstrap_carousel.asp ), but it didn't work. 我试图复制w3schools控件代码（您可以在这里找到： https : //www.w3schools.com/bootstrap4/bootstrap_carousel.asp ），但是没有用。 After that I searched for a typo, but I didn't find it. 之后，我搜索了一个错字，但没有找到。 May I have your help please? 我可以帮忙吗？

This is my code: 这是我的代码：

 <!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

Are you missing the # symbol in the second li element in the ordered list? 您是否在有序列表的第二个li元素中缺少＃符号？

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

should be: 应该：

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

Answer 2

There are a couple of things to note here. 这里有几件事要注意。

First, as you have set the id of the .carousel to ce , you should follow-up this change all over the markup. 首先，将.carousel的id设置为ce ，您应该在整个标记中进行此更改。 Namely, you have to set the data-target attribute of the indicators, as well as the value of href of the carousel controls. 即，您必须设置指标的data-target属性以及轮播控件的href值。 The latter ones are the arrows! 后面的是箭头！
Second, you did not see the arrows (or at least the right one) over the images as you have set the width of the images to a fix 500px, while the .carousel fills up all the available width. 其次，由于将图片的宽度设置为固定的500px，而.carousel填充了所有可用的宽度，因此您没有在图片上看到箭头（或至少在右边）。 Meaning that the images were not filling up the width of the carousel, but the right arrow is sticked to the right side of the carousel. 这意味着图像并未填满轮播的宽度，但向右箭头粘贴在轮播的右侧。

In the example below you will see some comments as well regarding the changes I've made. 在下面的示例中，您还将看到有关我所做更改的一些注释。

 <!-- 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>

为什么下一个箭头没有显示？

问题描述

2 个解决方案

解决方案1
0 2018-01-13 23:48:08

解决方案2
0 已采纳 2018-01-17 21:55:18

为什么下一个箭头没有显示？

问题描述

2 个解决方案

解决方案1 0 2018-01-13 23:48:08

解决方案2 0 已采纳 2018-01-17 21:55:18

解决方案1
0 2018-01-13 23:48:08

解决方案2
0 已采纳 2018-01-17 21:55:18