javascript - 在 Bootstrap Carousel 中放置 DIV 容器
问题描述
我希望在我的 Bootstrap Carousel 幻灯片中放置容器，这将在图像上覆盖一些文本和链接。我已经把它定位得很好，看起来它最初可以工作，但是在转到下一张幻灯片后，它不会让你返回到带有容器的幻灯片。只有另外两个。知道为什么会发生这种情况吗？感谢您提前提供任何帮助。
https://i.imgur.com/DRyaJkS.png )
我的代码：
<div id="wrapper-slides">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div id="box1">
<br />
<div id="box1title"><span class="chivoregular">
<font color=white>AEROSPACE. MILITARY. COMMERCIAL. SPECIALTY.
</span></div>
<br /><br /><br />
<div id="box1text"><span class="chivolight" style="font-size: 1.25em;">
<font color=white>Our customers first choice for quality fasteners.
</span></div>
<div id="box1link" class="pointer chivolight hvr-back-pulse">READ MORE <i class="fa fa-angle-right"></i></div>
<div id="box1page" class="chivolight">
1/3
</div>
</div>
<img src="images/anasislaunch.jpg" alt="First slide" width="100%">
</div>
<div class="carousel-item">
<img src="images/f-35.jpg" alt="Second slide" width="100%">
</div>
<div class="carousel-item">
<img src="images/heli.png" alt="Third slide" width="100%">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.5.1.min.js"></script>
<script type="module" src="js/carousel.js"></script>
<script type="text/javascript" src="js/util.js"></script>
#box1 {
display: inline-block;
background-color: #1e366c;
padding-left: 20px;
padding-bottom: 30px;
margin-right: 150px;
opacity: 0.95;
position: absolute;
}
#box1link {
display: inline-block;
background-color: #244080;
width: 170px;
height: 18px;
float: right;
text-align: center;
font-size: 1.5em;
padding-top: 11px;
padding-bottom: 15px;
}
#box1page {
float: right;
margin-right: 5px;
}
#box1text {}
#box1link:hover {
background-color: black;
transition: background-color 0.5s;
}
.carousel {
position: relative
}
.carousel-inner {
position: relative;
width: 100%;
overflow: hidden
}
.carousel-item {
position: relative;
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
transition: -webkit-transform .6s ease;
transition: transform .6s ease;
transition: transform .6s ease, -webkit-transform .6s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-perspective: 1000px;
perspective: 1000px
}
.carousel-item-next, .carousel-item-prev, .carousel-item.active {
display: block
}
.carousel-item-next, .carousel-item-prev {
position: absolute;
top: 0
}
.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right {
-webkit-transform: translateX(0);
transform: translateX(0)
}
@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {
.carousel-item-next.carousel-item-left, .carousel-item-prev.carousel-item-right {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0)
}
}
.active.carousel-item-right, .carousel-item-next {
-webkit-transform: translateX(100%);
transform: translateX(100%)
}
@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {
.active.carousel-item-right, .carousel-item-next {
-webkit-transform: translate3d(100%, 0, 0);
transform: translate3d(100%, 0, 0)
}
}
.active.carousel-item-left, .carousel-item-prev {
-webkit-transform: translateX(-100%);
transform: translateX(-100%)
}
@supports ((-webkit-transform-style:preserve-3d) or (transform-style:preserve-3d)) {
.active.carousel-item-left, .carousel-item-prev {
-webkit-transform: translate3d(-100%, 0, 0);
transform: translate3d(-100%, 0, 0)
}
}
.carousel-control-next, .carousel-control-prev {
position: absolute;
top: 0;
bottom: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 15%;
color: #fff;
text-align: center;
opacity: .5
}
.carousel-control-next:focus, .carousel-control-next:hover, .carousel-control-prev:focus, .carousel-control-prev:hover {
color: #fff;
text-decoration: none;
outline: 0;
opacity: .9
}
.carousel-control-prev {
left: 0
}
.carousel-control-next {
right: 0
}
.carousel-control-next-icon, .carousel-control-prev-icon {
display: inline-block;
width: 20px;
height: 20px;
background: transparent no-repeat center center;
background-size: 100% 100%;
margin-bottom: 300px;
}
.carousel-control-prev-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")
}
.carousel-control-next-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")
}
.carousel-indicators {
position: absolute;
right: 0;
bottom: 10px;
left: 0;
z-index: 15;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding-left: 0;
margin-right: 15%;
margin-left: 15%;
list-style: none
}
.carousel-indicators li {
position: relative;
-webkit-box-flex: 0;
-ms-flex: 0 1 auto;
flex: 0 1 auto;
width: 30px;
height: 3px;
margin-right: 3px;
margin-left: 3px;
text-indent: -999px;
background-color: rgba(255, 255, 255, .5)
}
.carousel-indicators li::before {
position: absolute;
top: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: ""
}
.carousel-indicators li::after {
position: absolute;
bottom: -10px;
left: 0;
display: inline-block;
width: 100%;
height: 10px;
content: ""
}
.carousel-indicators .active {
background-color: #fff
}
.carousel-caption {
position: absolute;
right: 15%;
bottom: 20px;
left: 15%;
z-index: 10;
padding-top: 20px;
padding-bottom: 20px;
color: #fff;
text-align: center
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
border: 0
}
.sr-only-focusable:active, .sr-only-focusable:focus {
position: static;
width: auto;
height: auto;
overflow: visible;
clip: auto;
white-space: normal;
-webkit-clip-path: none;
clip-path: none
}
解决方案
你需要关闭你的</font>标签......或者更准确地说，你应该完全删除它，因为<font>它已经过时了。
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div id="wrapper-slides">
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div class="carousel-inner">
<div class="carousel-item active">
<div id="box1">
<br />
<div id="box1title">
<span class="chivoregular">
<font color=white>AEROSPACE. MILITARY. COMMERCIAL. SPECIALTY.</font>
</span>
</div>
<br /><br /><br />
<div id="box1text">
<span class="chivolight" style="font-size: 1.25em;">
<font color=white>Our customers first choice for quality fasteners.</font>
</span>
</div>
<div id="box1link" class="pointer chivolight hvr-back-pulse">READ MORE <i class="fa fa-angle-right"></i></div>
<div id="box1page" class="chivolight">1/3</div>
</div>
<img src="https://placehold.it/300x300/&text=1" alt="First slide" width="100%">
</div>
<div class="carousel-item">
<img src="https://placehold.it/300x300/&text=2" alt="Second slide" width="100%">
</div>
<div class="carousel-item">
<img src="https://placehold.it/300x300/&text=3" alt="Third slide" width="100%">
</div>
</div>
<a class="carousel-control-prev" href="#carousel-example-generic" 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-example-generic" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>推荐阅读
- python - 使用多索引 Pandas 和样式进行过滤
- python - 从 numpy argsort 得到奇怪的结果
- javascript - 如何使图像显示在容器 Div 内？
- python - 迁移学习，错误的密集层形状
- javascript - 在 Dojo 中的确认对话框上取消注册 On-Execute 操作
- ionic-framework - 如何检查复选框是否被选中？以及如何求和一个值？
- python - 将满足我的要求的蛮力 XOR 密钥
- javascript - 有什么理由不将请求/响应作为参数传递？
- sql-server - 如何在 CASE 中生成 XML 路径
- javascript - HTML / CSS / JS --> 语法错误：动画注册表单