轮播下一个/上一个按钮和滚动不起作用答案

【问题标题】：Carousel next/prev buttons and scrolling are not working轮播下一个/上一个按钮和滚动不起作用
【发布时间】：2020-04-23 13:23:19
【问题描述】：

Bootstrap Carousel 组件显示正常，但不会自动滚动，并且下一个/上一个按钮不起作用。我已经阅读了很多类似的问题，但是对于为什么会发生这种情况，我已经没有想法了。

我已确保 Jquery/Boostrap 依赖项的顺序正确。我从 Bootstrap 文档中复制并粘贴了轮播代码，我所做的唯一更改是我在本地加载的图像。

提前感谢您的帮助！

<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

</head>
<body>


<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active">
      <img src="../assets/dict.jpg" class="d-block w-100" alt="0">
    </div>
    <div class="carousel-item">
      <img src="../assets/JuveLogo.png" class="d-block w-100" alt="1">
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>


<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>


</body>

</html>

【问题讨论】：

@ 您的代码正确且有效，但由于白色不透明，您无法看到下一个和上一个箭头，因此您需要放置 实时图像网址或者你可以检查定义 width+height 和 border in red 颜色。
我可以看到我发布的代码中的箭头。轮播显示正确，当我将鼠标悬停在箭头上时，鼠标图标会相应更改。但是，当我点击它们时，什么也没有发生。

标签： html bootstrap-4 angular-cli

【解决方案1】：

您是否尝试过 w3schools 的 Worning 代码示例？这是他们页面的链接：https://www.w3schools.com/bootstrap/bootstrap_carousel.asp

他们很好地解释了 Bootstrap 的轮播是如何工作的 :)

【讨论】：

【解决方案2】：

这是与现有代码相同的工作示例，仅将 image 更改为 text 并定义 黑色箭头。

.carousel-control-prev, .carousel-control-next{
  background: #000;
  width: 40px!important;
  height: 40px!important;
  border-radius: 50px;
  top: 50%!important;
  margin-top: -20px;
}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Carousel Test</title>
</head>
<body>

<div class="container p-3">
	<div class="row">
		<div class="col-sm-12">
			<!--Start Carousel  -->
			<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
			  <div class="carousel-inner">
			    <div class="carousel-item active">
			      <h3>Slide #1</h3>
			      <p>
			      	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			      	consequat.
			      </p>
			    </div>
			    <div class="carousel-item">
			      <h3>Slide #2</h3>
			      <p>
			      	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			      	consequat.
			      </p>
			    </div>
			    <div class="carousel-item">
			      <h3>Slide #3</h3>
			      <p>
			      	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
			      	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
			      	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
			      	consequat.
			      </p>
			    </div>
			  </div>
			  <a class="carousel-control-prev" href="#carouselExampleControls" 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="#carouselExampleControls" role="button" data-slide="next">
			    <span class="carousel-control-next-icon" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
			<!-- /End Carousel -->
		</div>
	</div>
</div>

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>
</html>

【讨论】：

这仍然对我不起作用。它显示正确，就像我发布的代码一样，但是当我单击箭头时没有任何反应。唯一明显的区别是，当我单击箭头时，网址从“localhost:4200”变为“localhost:4200/#carouselExampleControls”，这也发生在我发布的代码中。
你也可以这样尝试 ...
表示将 anchor tag 替换为 div 并将 href 替换为 data-target 属性。跨度>