Question

我是新手自行车旋转木马。我从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>

Answer 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”以使其工作。

Bootstrap 4 beta轮播指示灯和控件无法响应鼠标点击

1 个答案: