PROBLEM:

  1. Wie kann ich dem Karussell eine Höhe von 100% des Bildschirms geben?
  2. Wie kann ich die Karussellbeschriftung vertikal zentrieren?
  3. Wie kann ich die Karussellbeschriftung und die Karussellindikatoren (Bilder) auf das gleiche Niveau bringen?

Können Sie dieses Problem lösen, ich habe versucht, das zu lösen, aber es kann nicht.

Unten ist der Code, den ich versucht habe:

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>

Danke im Voraus !

1
c4rlosls 18 Jän. 2019 im 12:59

3 Antworten

Beste Antwort

Um ein ansprechendes Vollbild-Karussell zu erhalten, ist es eine gute Idee, Ihre Inline-Bilder in Hintergrundbilder umzuwandeln. Unten habe ich ein Skript verwendet, das dies "automatisch" beim Laden der Seite ausführt.

Sehen Sie, was ich durch die Verwendung von Bootstrap 4-Klassen und benutzerdefiniertem CSS erhalten habe:

$('#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>

Sie können mehr CSS , einschließlich Medienabfragen , schreiben, um auf allen oder den meisten Geräten ein für Sie geeignetes Ergebnis zu erzielen.

2
Razvan Zamfir 20 Jän. 2019 im 20:48

Wenn Sie möchten, dass das Karussell im Vollbildmodus height: 100vh und die Bilder als Hintergrund eingestellt sind, werden sie andernfalls gestreckt.

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

Wenn Sie möchten, dass sich die Beschriftungen immer in der Mitte des Bildschirms befinden, überschreiben Sie das CSS wie folgt:

.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 20 Jän. 2019 im 17:03

Bootstrap-Karussell ist nicht die beste Wahl für dieses Problem. Verwenden Sie "Eulenkarussell". In Frage 2 und 3 erfahren Sie mehr über 'Position' in css.

Weitere Informationen zu Frage 1

Weitere Informationen zu Frage 2 und 3

-1
Jeremy Walters 18 Jän. 2019 im 12:55