html - 轮播高度 100%，轮播标题对齐中间和图像指示器

Question

问题

我怎样才能给旋转木马一个 100% 的屏幕高度？
如何将轮播标题垂直居中？
如何将轮播标题和轮播指示器（图像）置于同一级别？

你能解决这个问题吗，我试图解决，但它不能。

以下是我尝试过的代码：

html,
body{
  height: 100%;
}

.carousel-caption{
  top: 60%;
  transform: translateY(-50%);
}

.carousel-indicators li{
  height: 72px !important;
  border-radius: 0px !important;
  width: 192px !important;
  background: url(http://ebitfactory.se/wp-content/uploads/2016/11/photo-1465056836041-7f43ac27dcb5-1920x720.jpeg) !important;
}

.carousel-indicators li:hover{
  transform: scale(1.02);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<main role="main">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
      <li data-target="#myCarousel" data-slide-to="0" class="active"><img data-slide-to="0" data-target="#myCarousel" src="http://ebitfactory.se/wp-content/uploads/2016/11/photo-1465056836041-7f43ac27dcb5-1920x720.jpeg" alt="" width="192" height="72"></li>
      <li data-target="#myCarousel" data-slide-to="1"></li>
      <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner h-100">
      <div class="carousel-item active">
        <img src="https://i.imgur.com/wnZPRGU.jpg" alt="" width="100%">
        <div class="container align-middle">
          <div class="carousel-caption text-left">
            <h1>Example headline.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://i.imgur.com/wnZPRGU.jpg" alt="" width="100%">
        <div class="container">
          <div class="carousel-caption">
            <h1>Another example headline.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
          </div>
        </div>
      </div>
      <div class="carousel-item">
        <img src="https://i.imgur.com/wnZPRGU.jpg" alt="" width="100%">
        <div class="container">
          <div class="carousel-caption text-right">
            <h1>One more for good measure.</h1>
            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
            <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</main>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

提前致谢！

score 2 · Accepted Answer

为了获得响应式全屏轮播，将您的内联图像转换为背景图像是一个很好的主意。贝娄我使用了一个在页面加载时“自动”执行此操作的脚本。

看看我通过使用 Bootstrap 4 类和一些自定义 CSS 得到了什么：

$('#demo').find('.carousel-item').each(function() {
  var imgContainer = $(this),
    bkImg = imgContainer.find('img').attr('src');
  imgContainer.css("background-image", 'url("' + bkImg + '")');
});

.carousel-item {
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 0 15%;
}

.carousel-item.active,
.carousel-item-left,
.carousel-item-right {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

.carousel-item img {
  display: none;
}

.carousel-item h1 {
  color: #fff;
  font-size: 36px;
  padding: 0 10%;
}

.carousel-item p {
  color: #fff;
  margin: 10px 0;
}

.carousel-indicators {
  margin: 0 !important;
  bottom: 7vh !important;
}

.carousel-indicators li {
  height: 20px !important;
  width: 100px !important;
  border-radius: 0px !important;
  opacity: .8 !important;
  background: url("https://picsum.photos/100/40/?gravity=west") center center no-repeat !important;
}

@media screen and (min-width: 992px) {
  .carousel-indicators {
    bottom: auto !important;
    top: 67vh !important;
  }
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<div id="demo" class="carousel slide" data-ride="carousel" data-inerval=4000>

  <!-- Indicators -->
  <ul class="carousel-indicators">
    <li data-target="#demo" data-slide-to="0" class="active"></li>
    <li data-target="#demo" data-slide-to="1"></li>
    <li data-target="#demo" data-slide-to="2"></li>
  </ul>

  <!-- The slideshow -->
  <div class="carousel-inner">
    <div class="carousel-item active">
      <div class="slide-content mx-auto">
        <img src="https://i.imgur.com/wnZPRGU.jpg" alt="">
        <h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
        <p class="text-center">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id.</p>
        <div class="text-center">
          <a class="btn btn-md btn-primary" href="#" role="button">Browse gallery</a>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="slide-content mx-auto">
        <img src="https://i.imgur.com/wnZPRGU.jpg" alt="">
        <h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
        <p class="text-center">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus.</p>
        <div class="text-center">
          <a class="btn btn-md btn-primary" href="#" role="button">Browse gallery</a>
        </div>
      </div>
    </div>
    <div class="carousel-item">
      <div class="slide-content mx-auto">
        <img src="https://i.imgur.com/wnZPRGU.jpg" alt="">
        <h1 class="display-1 text-center">Lorem ipsum dolor sit amet adipisicing</h1>
        <p class="text-center">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
        <div class="text-center">
          <a class="btn btn-md btn-primary" href="#" role="button">Browse gallery</a>
        </div>
      </div>
    </div>
  </div>

  <!-- Left and right controls -->
  <a class="carousel-control-prev" href="#demo" data-slide="prev">
    <span class="carousel-control-prev-icon"></span>
  </a>
  <a class="carousel-control-next" href="#demo" data-slide="next">
    <span class="carousel-control-next-icon"></span>
  </a>
</div>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

您可以编写更多的 CSS，包括媒体查询，以获得适合您的结果，在所有或大多数设备上。

score 0 · Accepted Answer

如果您希望轮播设置为全屏height: 100vh并且图像作为背景，否则它们将被拉伸，所以：

.carousel-item {
    height: 100vh;
    background-image: url(https://i.imgur.com/wnZPRGU.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

如果您希望字幕始终位于屏幕中间，请覆盖 css，例如：

.carousel-caption {
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 80%;
}

score -1 · Accepted Answer

Boostrap 轮播不是解决这个问题的最佳选择。使用“猫头鹰旋转木马”。对于问题 2 和 3，去了解更多关于“位置”的信息css。

关于问题 1的更多信息

关于问题 2 和 3的更多信息

html - 轮播高度 100%，轮播标题对齐中间和图像指示器

3 回答 3

Related

Reference