Вопросы Теги

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

В Arch / Manjaro просто установите пакет tk: 

sudo pacman -S tk
1
задан Razvan Zamfir 21 January 2019 в 13:44
поделиться

3 ответа

Если вы хотите, чтобы карусель была в полноэкранном режиме, установите 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%;
}
0
ответ дан Αntonis Papadakis 21 January 2019 в 13:44
поделиться

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

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

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

.
0
ответ дан Jeremy Walters 21 January 2019 в 13:44
поделиться

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

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

0
ответ дан Razvan Zamfir 21 January 2019 в 13:44
поделиться