Bootstrap 4 carousel next和prev按钮在一个页面上不起作用，但在另一个页面上工作正常
Bootstrap 4 carousel next和prev按钮在一个页面上不起作用，但在另一个页面上工作正常
提问于 2020-05-15 04:42:45
这个Carousel在一个网页上工作得很好(自动滑动并带有按钮)，但当我将此代码输入到我的索引页面时，它会自动滑动，但不能使用按钮(上一页，下一页)。代码如下：
(整个是这个错误的完整细节，我在Bootstrap4中使用html5 )
<div class="container-fluid pb-5">
<div class="row">
<div class="col-12 text-center mt-3">
<h1 class="mx-auto mt-5 afterline">Programs & Projects</h1>
</div>
</div>
<div class="row">
<div class="col-6 col-xs-4 mt-4">
<select id="select_featured_project" class="float-right px-xl-5 px-lg-5 px-md-5 px-4 py-3">
<option value="featured">Featured</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
<div class="col-6 col-xs-4 mt-4">
<select id="select_design_tech" class="px-xl-5 px-lg-5 px-md-5 px-2 py-3">
<option value="featured">Design & Tech</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
</div>
</div>
<!-- Carousel row -->
<div class="row">
<div class="col-12">
<div id="carouselExampleControls" class="carousel slide mt-5" data-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<div class="container p-4">
<!-- row 1 -->
<div class="row justify-content-center">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 1 ends -->
<!-- row 2 -->
<div class="row justify-content-center mt-3">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 2 ends -->
</div>
<!-- container ends -->
</div>
<!-- carousel-item slide 1 ends -->
<div class="carousel-item">
<div class="container p-4">
<!-- row 1 -->
<div class="row justify-content-center">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 1 ends -->
<!-- row 2 -->
<div class="row justify-content-center mt-3">
<div class="col-xl-3 col-lg-3 col-12 bg-dark mr-3" style="height:300px;" >
<h1 class="text-white pt-5 pl-4">PROJECT NAME</h1>
<h5 class="pt-2 pl-4" style="color:#cccccc">PROJECT TYPE</h5>
<i class="fab fa-facebook fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
<i class="fab fa-google fa-2x pt-4 pl-4" style="color:#cccccc;"></i>
</div>
<div class="col-xl-3 col-lg-3 col-12 mr-3" style="background:#cccccc">
</div>
<div class="col-xl-3 col-lg-3 col-12" style="background:#cccccc">
</div>
</div>
<!-- row 2 ends -->
</div>
<!-- container ends -->
</div>
<!-- carousel-item slide 2 ends -->
</div>
<!-- carousel-inner ends -->
<a class="carousel-control-prev" style="color:black" href="#carouselExampleControls" role="button" data-slide="prev">
<!-- <span class="carousel-control-prev-icon" aria-hidden="true"></span> -->
<!--visible on xl-->
<span><i class="d-none d-xl-block fas fa-chevron-left fa-10x fa-lg fa-sm fa-xs" aria-hidden="true"></i></span>
<!-- visible on lg -->
<span><i class="d-none d-lg-block d-xl-none fas fa-chevron-left fa-8x" aria-hidden="true"></i></span>
<!-- visible on md -->
<span><i class="d-none d-md-block d-lg-none fas fa-chevron-left fa-6x" aria-hidden="true"></i></span>
<!-- visible on sm -->
<span><i class="d-none d-sm-block d-md-none fas fa-chevron-left fa-4x" aria-hidden="true"></i></span>
<!-- visible on xs -->
<span><i class="d-block d-sm-none fas fa-chevron-left fa-2x" aria-hidden="true"></i></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" style="color:black;" href="#carouselExampleControls" role="button" data-slide="next">
<!--visible on xl-->
<span><i class="d-none d-xl-block fas fa-chevron-right fa-10x fa-lg fa-sm fa-xs" aria-hidden="true"></i></span>
<!-- visible on lg -->
<span><i class="d-none d-lg-block d-xl-none fas fa-chevron-right fa-8x" aria-hidden="true"></i></span>
<!-- visible on md -->
<span><i class="d-none d-md-block d-lg-none fas fa-chevron-right fa-6x" aria-hidden="true"></i></span>
<!-- visible on sm -->
<span><i class="d-none d-sm-block d-md-none fas fa-chevron-right fa-4x" aria-hidden="true"></i></span>
<!-- visible on xs -->
<span><i class="d-block d-sm-none fas fa-chevron-right fa-2x" aria-hidden="true"></i></span>
<span class="sr-only">Next</span>
</a>
<!-- carousel-controls ends -->
</div>
</div>
</div>
<!--Carousel row ends -->
</div>Bootstrap cdn
<!--DISABLE ZOOMING -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- 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">
<link rel="stylesheet" type="text/css" href="./styles/style.css">
<!-- <link rel="stylesheet" type="text/css" href="./styles/bootstrap-4.4.1/css/bootstrap.min.css"> -->jQuery cdn
<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>
<script src="https://kit.fontawesome.com/37a1f2cd33.js" crossorigin="anonymous"></script>回答 1
Stack Overflow用户
发布于 2020-05-16 21:06:28
这个问题是由于多个轮播的相同id造成的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61807045
复制相关文章
相似问题
腾讯云开发者
