Javascript 将DIV容器放置在引导转盘内
我想把容器放在我的引导转盘幻灯片中,它会用一些文本和链接覆盖图像。我已经把它放好了,一开始看起来很好,但是在下一张幻灯片上,它不允许你带着容器回到幻灯片上。只有另外两个。知道为什么会这样吗?提前谢谢你的帮助 ) 我的代码:Javascript 将DIV容器放置在引导转盘内,javascript,html,css,twitter-bootstrap,bootstrap-4,Javascript,Html,Css,Twitter Bootstrap,Bootstrap 4,我想把容器放在我的引导转盘幻灯片中,它会用一些文本和链接覆盖图像。我已经把它放好了,一开始看起来很好,但是在下一张幻灯片上,它不允许你带着容器回到幻灯片上。只有另外两个。知道为什么会这样吗?提前谢谢你的帮助 ) 我的代码: <div id="wrapper-slides"> <div id="carousel-example-generic" class="carousel slide" data-ride
<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>
您需要关闭
标签。。。或者更准确地说,您应该完全删除它,因为
是
航空航天军队。商业的。专业
我们的客户是优质紧固件的首选。
阅读更多
1/3
您需要关闭您的
标签。。。或者更准确地说,您应该完全删除它,因为
是
航空航天军队。商业的。专业
我们的客户是优质紧固件的首选。
阅读更多
1/3
Oops。。哈哈。我也不知道字体标签已经过时了。非常感谢。哎呀。。哈哈。我也不知道字体标签已经过时了。非常感谢。
#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
}