我想创建一个没有自动循环功能的幻灯片。我只想通过单击箭头来手动控制循环。
但是左右控件不起作用。
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
</head>
<body>
<div class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100" src="https://d2z0k43lzfi12d.cloudfront.net/blog/vcdn215/wp-content/uploads/2017/06/15.06._Running-Stamina-1-800x510.jpg">
<div class="carousel-caption">
<h3>HelloWorld</h3>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="https://www.shape.com/sites/shape.com/files/1200-woman-running-outside_1.jpg">
<div class="carousel-caption">
<h3>HelloWorld</h3>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100" src="/Virginian_banner.jpg">
<div class="carousel-caption">
<h3>HelloWorld</h3>
</div>
</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://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</body>有谁知道为什么吗？
最佳答案
您已在carousel-control中给出了href="#carouselExampleControls"。
所以把这个href作为主div的id
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" ">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel" data-interval="false">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block w-100 img-fluid" src="https://d2z0k43lzfi12d.cloudfront.net/blog/vcdn215/wp-content/uploads/2017/06/15.06._Running-Stamina-1-800x510.jpg">
<div class="carousel-caption">
<h3>HelloWorld</h3>
</div>
</div>
<div class="carousel-item">
<img class="d-block w-100 img-fluid" src="https://www.shape.com/sites/shape.com/files/1200-woman-running-outside_1.jpg">
<div class="carousel-caption">
<h3>HelloWorld</h3>
</div>
</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-4 - 左右控件在轮播 Bootstrap 4.1 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50072454/