web-dev-qa-db-ja.com

フクロウカルーセルで画像を中央に配置する方法

My Owl Carouselには、幅と高さが異なる写真が含まれています。水平および垂直の両方で中央に配置するにはどうすればよいですか？

$("#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
17
Gleb Kemarsky

  1. Owl Carouselは、レイアウト内に追加のブロックを作成します。 CSSプロパティを正しく追加するには、次の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. さらに、カルーセルはすべてのブロックにstyle属性を追加します。たとえば、.owl-wrapperクラスを持つブロックは、displayの値を持つblockプロパティを受け取ります。したがって、CSSで!important宣言を使用する必要があります。

  3. 水平方向の配置を取得するには、各text-align: center;に.owl-item > divプロパティを追加するだけです。

  4. 垂直方向に整列するには、テーブルセルのカルーセルアイテムを回転できます。ただし、それらのfloatプロパティをキャンセルすることを忘れないでください。

screenshot

すべての変更を新しい.owl-centeredクラスとして整理しましょう。結果を確認してください：

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>
15
Gleb Kemarsky

フクロウカルーセルバージョン2.1.1とCSS3 Flexboxでは、スタイルを追加するだけです：

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

スニペットをご覧ください：

$( 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>
32
xavier bs

これは私のために働く：

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

ただし、HTMLに合わせて調整することもできますが、モバイル上では、親をテキストで配置し、コンテンツを保持する子をfloat：noneとdisplay：inline-blockするという考え方です：

4
Lucas Bustamante

表示テーブルを使用したソリューションは問題ありませんが、私にとっては、右側と左側のdivがコンテナーからスライドします。私のコードは同じです。tableとtable-cellをblockとinline-blockに変更しました

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

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

.item{
  text-align: center;
}

結果（すべての画像のサイズは異なります）： enter image description here

2
Imre