在引导轮播中使用图像而不是幻灯片背景
Posted
技术标签:
【中文标题】在引导轮播中使用图像而不是幻灯片背景【英文标题】：Using image in boostrap carousel other than background for slide 【发布时间】：2019-06-27 15:18:56 【问题描述】：我正在尝试在引导轮播中使用图像，就像在中间的左侧图像上的一个标题和在右侧的第二个标题一样的文本，就像我在附加的图像中一样。附加的图像作为预期的轮播我需要：
但是当我在 bootstrap carousel 上尝试它时，图像会从 carousel 主体向下移动。我所做的是我为轮播分配了 500px 的高度，然后以绝对定位放置然后将轮播居中
.carousel
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
它与文本一起工作得很好，但是当我添加图像时，它再次改变它的位置并沿着框架向下移动。正如我得到的图像中所附的那样：
我想恢复
我的html代码是
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" href="css/bootstrap/bootstrap.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap/bootstrap.js"></script>
<!-- <link href="https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700,800,900" rel="stylesheet">-->
</head>
<body>
<div class="container-fluid">
<div class="row header flex-container">
<div class="sidebar-header">
</div>
<div class="main-bg">
<div class="row">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li class="get-quote"><a href="#">Get quote</a></li>
</ul>
</nav>
</div>
<div class="row">
<div class="main-slider">
<div class="container-fluid">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active">01</li>
<li data-target="#myCarousel" data-slide-to="1">02</li>
<li data-target="#myCarousel" data-slide-to="2">03</li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="slider-height" src="img/bag.png">
</div>
</div>
<!-- Left and right controls -->
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
我的css是
.main-slider
height: 500px;
text-align: center;
position: relative;
max-height: 100%;
background-color: #FFD731;
.carousel
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 50%;
height: 30%;
margin: auto;
.carousel-indicators
position: absolute;
left: 150%;
z-index: 15;
text-align: center;
list-style: none;
.carousel-indicators li
display:block;
width: 10px;
height: 10px;
margin: 10px;
text-indent:0px;
cursor: pointer;
background-color: #000 \9;
background-color: rgba(0, 0, 0, 0);
border: none;
border-radius: none;
.carousel-indicators .active
width: inherit;
height: inherit;
margin: inherit;
background-color:transparent;
【问题讨论】：
您可以为轮播添加所有代码以及样式吗？否则我们将不得不猜测问题是什么。 完成先生更新了代码， 【参考方案1】：我不知道它是否是您的示例代码的一部分并且您已删除其他幻灯片，但您有三个指示器，但只有一张幻灯片。这可能会引起一些麻烦。所以我会先替换这个：
<div class="item active">
<img class="slider-height" src="img/bag.png">
</div>
<div class="item">
<img class="slider-height" src="img/ANOTHER-IMAGE.png">
</div>
<div class="item">
<img class="slider-height" src="img/A-THIRD-IMAGE.png">
</div>
这只是为了让您在尝试解决另一个问题时不会因此而遇到一些奇怪的行为。
您的实际问题的解决方案
这会将图像定位在item 的中心位置。呃……等一下！ item 不应该是 carousel-item (ref) 吗？否则样式可能会混乱？
永远不会...我会添加这个 css 来解决它：
.item,
.carousel-item
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
它使用Flexbox 将图像定位在图像的中心位置。
希望我正确理解了您的问题。
【讨论】：
它仍然没有效果，因为它不是需要对齐其子项的轮播项目，实际上是在我添加图像时。整个项目都下来了，但空间在主旋转木马中。我希望你能得到我 我不确定我是否明白你的意思。你的意思是图像底部对齐而不是中心对齐？如果是这样，那么我发布的代码应该可以修复它吗？ 我发现解决方案实际上是在黄色框内将轮播居中我在 css 中按百分比限制了它的宽度和高度，所以由于图像大小它正在下降，但将其全部移除以上是关于在引导轮播中使用图像而不是幻灯片背景的主要内容，如果未能解决你的问题，请参考以下文章