我添加了bootstrap carousel并更改为显示多个项目，虽然我遇到了问题
当我点击下一个徽标时，一切正常，但是当我点击上一个徽标时，在修复之前会同时出现多个徽标，会发生什么？我该如何解决这个问题？
这里有项目链接，实时页面和完整的回购
https://sebalaini.github.io/portfolio_test/
https://github.com/sebalaini/portfolio_test
这里是Codepen https://codepen.io/sebalaini/pen/wpRVYL和代码：
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="4"></li>
<li data-target="#carousel" data-slide-to="8"></li>
<li data-target="#carousel" data-slide-to="10"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block">
<h4>HTML</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block">
<h4>CSS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block">
<h4>SASS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block">
<h4>Javascript</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block">
<h4>Jquery</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block">
<h4>React</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block">
<h4>webpack</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block">
<h4>NPM</h4>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" 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="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
答案 0 :(得分：0)
您的指标编号似乎有些混乱。另外，根据我的口味，你有一点定制的CSS。所以，我把它撕掉并使用了原生的Bootstrap类，比如mx-auto（margin horizontal auto）。
查看此代码段然后开始逐位添加您自己的自定义代码，直到您看到它中断的位置：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
body {
background: black;
}
.carousel-inner {
height: 300px;
}
.carousel-item {
height: 300px;
}
.carousel-item img {
max-width: 250px;
max-height: 250px;
}
</style>
<div class="container">
<div class="row">
<div class="col mt-4">
<div id="carousel" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel" data-slide-to="0" class="active"></li>
<li data-target="#carousel" data-slide-to="3"></li>
<li data-target="#carousel" data-slide-to="7"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block mx-auto">
<h4>01 HTML</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block mx-auto">
<h4>02 CSS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block mx-auto">
<h4>03 SASS</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block mx-auto">
<h4>04 Javascript</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block mx-auto">
<h4>05 Jquery</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Second slide">
<div class="carousel-caption d-block mx-auto">
<h4>06 React</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="First slide">
<div class="carousel-caption d-block mx-auto">
<h4>07 webpack</h4>
</div>
</div>
<div class="carousel-item">
<img class="d-block mx-auto" src="https://wallpapercave.com/wp/ci1BoK6.jpg" alt="Third slide">
<div class="carousel-caption d-block mx-auto">
<h4>08 NPM</h4>
</div>
</div>
</div>
<a class="carousel-control-prev" href="#carousel" 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="#carousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>