Высота карусели 100%, карусель-заголовок выравнивают средний и индикаторы изображения

Question

ПРОБЛЕМА

1. Как я могу дать карусели высоту экрана 100%?
2. Как я могу расположить заголовок карусели вертикально по центру?
3. Как я могу поставить на один уровень карусельный заголовок и карусельный индикатор (изображения)?

Можете ли вы решить эту проблему, я пытался решить эту проблему, но она не может.

Ниже приведен код, который я пробовал:

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>

Заранее спасибо!

Answer 1

Если вы хотите, чтобы карусель была в полноэкранном режиме, установите 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%;
}

Answer 2

Для того, чтобы получить отзывчивую полноэкранную карусель, рекомендуется превратить встроенные изображения в фоновые. Ниже я использовал скрипт, который «автоматически» делает это при загрузке страницы.

Посмотрите, что я получил, используя классы 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 , включая медиазапросы , чтобы получить результат, подходящий вам, на всех или на большинстве устройств.

Answer 3

Карусель Boostrap - не лучший выбор для этой проблемы. Используйте «сова-карусель». По вопросам 2 и 3 зайдите и узнайте больше о «позиции» в css.

Дополнительная информация по Вопрос 1

Больше информации по Вопросам 2 и 3