Bootstrap Carousel центр изображения позиции - PullRequest
Новая
       53

Bootstrap Carousel центр изображения позиции

0 голосов
/ 22 октября 2018

Я использую Bootstrap 4 Carousel для своего сайта.Все работает, но сейчас я ищу решение для выравнивания изображения ползунка в центре карусели.

В настоящее время он выровнен по левой стороне, поэтому, когда я изменяю размер браузера, изображение ползунка будетвырезать с правой стороны.Я бы хотел, чтобы изображение было в центре, чтобы изображение было обрезано с обеих сторон. 

/* SLIDER
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 0;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 3rem;
  z-index: 10;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 30rem;
  background-color: #777;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
  min-width: 100%;
  height: 40rem;
  margin: 0 auto;
}
<!-- Slider -->

          <div id="Slider" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
              <li data-target="#Slider" data-slide-to="0" class="active"></li>
              <li data-target="#Slider" data-slide-to="1"></li>
              <li data-target="#Slider" data-slide-to="2"></li>
            </ol>
            <div class="carousel-inner">
              <div class="carousel-item active">
                <img class="first-slide" src="img1.jpg" alt="First slide">
                <div class="container">
                  <div class="carousel-caption text-left">
                    <h1>Platzhalter 1</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <p><a class="btn btn-lg btn-outline-warning" href="#" role="button">Jetzt buchen</a></p>
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <img class="second-slide" src="img2.jpg" alt="Second slide">
                <div class="container">
                  <div class="carousel-caption">
                    <h1>Platzhalter 2</h1>
                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>
                    <p><a class="btn btn-lg btn-warning" href="#" role="button">Learn more</a></p>
                  </div>
                </div>
              </div>
              <div class="carousel-item">
                <img class="third-slide" src="img3.jpg" alt="Third slide">
                <div class="container">
                  <div class="carousel-caption text-right">
                    <h1>Platzhalter 3</h1>
                    <p>Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                    <p><a class="btn btn-lg btn-outline-warning" href="#" role="button">Browse gallery</a></p>
                  </div>
                </div>
              </div>
            </div>
            <a class="carousel-control-prev" href="#Slider" role="button" data-slide="prev">
              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
              <span class="sr-only">Zurück</span>
            </a>
            <a class="carousel-control-next" href="#Slider" role="button" data-slide="next">
              <span class="carousel-control-next-icon" aria-hidden="true"></span>
              <span class="sr-only">Vor</span>
            </a>
          </div>

Пример

1 Ответ

0 голосов
/ 22 октября 2018

Попробуйте добавить эти правила CSS 

.carousel-item > img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  height: 40rem;
  margin: 0 auto;
}

Но для получения дополнительной помощи нам нужна информация о том, что вы пробовали, и рабочий фрагмент, как упомянуто в комментариях под вашим вопросом.

...