我添加了引导程序轮播并更改为显示多个项目,尽管我有问题
当我单击下一个徽标时,一切正常,但是当我单击上一个徽标时,会同时出现多个徽标,然后自行修复,会发生什么情况?我该如何解决这个问题?
这里是项目、实时页面和完整存储库的链接
链接已删除,因为不再存在
这里是 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>
看来你们的指标编号有点混乱。另外,你有一些适合我口味的自定义 CSS。因此,我将其删除并使用本机 Bootstrap 类代替,例如
mx-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>