引导 4 测试版轮播指示器和控件不响应鼠标单击

我是引导轮播的新手。我从 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>

这是因为数据目标和 href 属性始终指向您的 class="轮播幻灯片" 的 id，在您的情况下是 myCarousel。在class="carousel-indicators"中设置data-target="#myCarousel"，在class="carousel-control-prev"和class="carousel-control-next"中设置href="#myCarousel"使其工作。

相关内容

最新更新

热门标签：