web-dev-qa-db-fra.com

Comment centrer les images dans le carrousel de la chouette

Mon carrousel de hibou contient des images de différentes largeurs et hauteurs. Comment puis-je les aligner au milieu - horizontalement et verticalement?

$("#owl-example").owlCarousel({
  navigation: true
});
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css">

<div id="owl-example" class="owl-carousel">
  <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div>
  <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
  <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
  <div><img src="//placehold.it/240x240/fc6/fff/" alt=""></div>
  <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
  <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
  <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div>
</div>

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

htmlcsscarouselcenteringowl-carousel
13
Gleb Kemarsky

  1. Le carrousel de la chouette crée des blocs supplémentaires dans votre mise en page. Pour ajouter correctement les propriétés CSS, vous devez utiliser cette structure HTML:

    <div id="owl-demo" class="owl-carousel owl-theme">
  <div class="owl-wrapper-outer">
    <div class="owl-wrapper">
      <div class="owl-item">
        <div>
          <img src="" alt="">
        </div>
      </div>
      <div class="owl-item">
        <div>
          <img src="" alt="">
        </div>
      </div>
    </div>
  </div>
</div>

  2. De plus, le carrousel ajoute un attribut style à tous les blocs. Par exemple, un bloc avec la classe .owl-wrapper reçoit la propriété display avec la valeur block. Vous devez donc utiliser une déclaration !important dans votre CSS.

  3. Pour obtenir un alignement horizontal, vous pouvez simplement ajouter la propriété text-align: center; à chaque .owl-item > div.

  4. Pour aligner verticalement, vous pouvez activer les éléments du carrousel dans les cellules du tableau. Mais n'oubliez pas d'annuler la propriété float pour eux.

screenshot

Laissez-nous organiser toutes les modifications en tant que nouvelle classe .owl-centered. Veuillez vérifier le résultat:

https://codepen.io/glebkema/pen/BzgZxX

$("#owl-example").owlCarousel({
  navigation: true
});
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.css');
@import url('//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.theme.min.css');

.owl-centered .owl-wrapper {
  display: table !important;
}
.owl-centered .owl-item {
  display: table-cell;
  float: none;
  vertical-align: middle;
}
.owl-centered .owl-item > div {
  text-align: center;
}
<div id="owl-example" class="owl-carousel owl-centered">
  <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div>
  <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
  <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
  <div><img src="//placehold.it/240x240/fc6/fff/" alt=""></div>
  <div><img src="//placehold.it/160x160/9c6/fff/" alt=""></div>
  <div><img src="//placehold.it/200x200/c69/fff/" alt=""></div>
  <div><img src="//placehold.it/120x120/69c/fff/" alt=""></div>
</div>

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/owl-carousel/1.3.3/owl.carousel.min.js"></script>

14
Gleb Kemarsky

Avec la version 2.1.1 de hibou carrousel et CSS3 Flexbox, ajoutez simplement le style: 

.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

Voir l'extrait: 

$( document ).ready( function() {
  $( '.owl-carousel' ).owlCarousel({
     autoplay: true,
     margin: 2,
     loop: true,
     responsive: {
        0: {
           items:1
        },
        200: {
           items:3
        },
        500: {
           items:4
        }
     }
  });
});
.owl-carousel .owl-stage {
  display: flex;
  align-items: center;
}

.owl-carousel .caption {
  text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css" rel="stylesheet"/>

<div class="owl-carousel">
    <div class="item">
      <img src="http://lorempicsum.com/up/350/200/1">
      <div class="caption">Caption 1</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/255/200/2">
      <div class="caption">Caption 2</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/627/200/3">
      <div class="caption">Caption 3</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/627/300/4">
      <div class="caption">Caption 4</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/627/400/5">
      <div class="caption">Caption 5</div>
    </div>
    <div class="item">
      <img src="http://lorempicsum.com/up/255/200/6">
      <div class="caption">Caption 6</div>
    </div>
</div>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.min.js"></script>

27
xavier bs

Cela fonctionne pour moi:

@media (max-width:500px) {
    .owl-carousel .owl-item {
        text-align:center;
    }
    .owl-carousel .item {
        float: none;
        display: inline-block;
    }
}

Vous pouvez toutefois l’ajuster à votre code HTML, mais l’idée est d’aligner un parent sur un texte et de définir float: none et afficher: inline-block l’enfant qui contient le contenu sur mobile:

4
Lucas Bustamante

La solution avec display table est OK, mais pour moi les div à droite et à gauche glissent hors du conteneur. Mon code est le même, j'ai changé les table et table-cell en block et inline-block

.owl-stage{
  display: block !important;
}

.owl-item{
  display: inline-block;
  float: none;
  vertical-align: middle;
}

.item{
  text-align: center;
}

Le résultat (toutes les images ont des tailles différentes):  enter image description here

1
Imre