bootstrap 4 multiple elements previous collapse - css

Question

I added the bootstrap carousel and changed to display multiple items, although I have a problems
When I click on the next logo everything is ok, but when I click on the previous logo, appear multiple logos all together before to fix itself, What happens? How can I fix that problem?
Here a link to the project, live page and complete repo
https://sebalaini.github.io/portfolio_test/
https://github.com/sebalaini/portfolio_test
Here the Codepen https://codepen.io/sebalaini/pen/wpRVYL and the code:
<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>

Answer 1

It seems that the numbering of your indicators was a bit messed up. Also, you have a bit much of custom css for my taste. So, I ripped it out and used native Bootstrap classes instead such as mx-auto (margin horizontal auto).
Check out this snippet and then start adding your own custom code bit by bit until you see where it breaks:
<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>