除背景幻灯片等引导转盘使用图片

问题描述 投票:0回答:1

我试图在引导旋转木马使用的图像只是像在中间,第二个标题的右侧,因为我有附加image.Attached图像如预期转盘什么,我需要在左侧图像上的一个标题文字:

enter image description here

但是,当我尝试它引导旋转木马我有图像从旋转式机身下去。我所做的是,我已经指派了转盘的高度500像素,并把再定心绝对定位的旋转木马

.carousel{
  position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
     width: 50%;
     height: 30%;
     margin: auto;
}

它的所有工作与文字很好,但是当我添加的图片再次改变它的位置和下降附什么我得到的图像中的frame.as:

enter image description here

我希望把它备份

我的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;
}
jquery html css twitter-bootstrap carousel
1个回答
0
投票

我不知道这是否是你的示例代码的一部分,并且您已经删除其他幻灯片,但你有三个指标,但只有一个幻灯片。这可能会导致一些麻烦。因此,我想通过替换该启动:

<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的中心 - 中心图像位置。呃......等一下!不宜itemcarousel-itemref)?否则,造型威力陷入困境?

从来没有少......我想补充一点的CSS来解决这个问题:

.item, 
.carousel-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

它使用Flexbox在图像的中心 - 中心图像位置。

我希望我理解正确你的问题。

© www.soinside.com 2019 - 2024. All rights reserved.