Bootstrap 4 beta 轮播指示器和控件不响应鼠标点击答案

【问题标题】：Bootstrap 4 beta carousel indicators and controls not responding to mouse clickBootstrap 4 beta 轮播指示器和控件不响应鼠标点击
【发布时间】：2017-09-14 21:56:56
【问题描述】：

我是引导轮播的新手。我从 Bootstrap 4 Beta 文档中复制了 html 代码，并从 maxcdn 链接了 css、js。轮播完美加载，图像滑动，甚至在鼠标悬停时暂停。但是，指示器和上一个/下一个控件不响应鼠标单击。请帮忙！

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">


	<title>Carousel</title>
</head>
<body>
	<div id="myCarousel" class="carousel slide" data-ride="carousel">
		<ol class="carousel-indicators">
			<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="4"></li>
			<li data-target="#carouselExampleIndicators" data-slide-to="5"></li>
		</ol>
		<div class="carousel-inner">
			<div class="carousel-item active">
				<img src="images/011.jpg" alt="One" class="d-block img-fluid">
			</div>
			<div class="carousel-item">
				<img src="images/012.jpg" alt="Two" class="d-block img-fluid">
			</div>				
			<div class="carousel-item">
				<img src="images/013.jpg" alt="Three" class="d-block img-fluid">
			</div>
			<div class="carousel-item">
				<img src="images/014.jpg" alt="Four" class="d-block img-fluid">
			</div>				
			<div class="carousel-item">
				<img src="images/015.jpg" alt="Five" class="d-block img-fluid">
			</div>				
			<div class="carousel-item">
				<img src="images/016.jpg" alt="Six" class="d-block img-fluid">
			</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>


	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>

</body>
</html>

【问题讨论】：

标签： bootstrap-4

【解决方案1】：

这是因为 data-target 和 href 属性始终指向您的 class="carousel-slide" 的 id，在您的情况下是 myCarousel。在 class="carousel-indicators" 中设置 data-target="#myCarousel" 并在 class="carousel-control-prev" 和 class="carousel-control-next" 中设置 href="#myCarousel" 以使其工作。

【讨论】：