Owlカルーセルの画像を中央に配置する方法

Question

My Owlカルーセルには幅と高さの異なる写真が含まれています。どのように私はそれらを真ん中に - 水平と垂直の両方に整列させるのですか？

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

Answer 1

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

3. .owl-item > divには、text-align: center;プロパティを追加するだけで簡単に調整できます。

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

私たちは新しい.owl-centeredクラスとしてすべての変更をアレンジしてみましょう。結果を確認してください：

フクロウカルーセルバージョン2.1.1およびCSS3フレキシボックスで

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>

Answer 2

、単にスタイルを追加します。

.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>

Answer 3

これが私の作品：

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

あなたはしかし、あなたのHTMLにそれを調整するかもしれませんが、アイデアは、あなたが親を、そしてフロート揃えテキストということではありません：なしと表示：インラインモバイルでコンテンツを保持する子供をブロックする：

Answer 4

表示テーブルのソリューションはOKですが、私にとっては左右のdivがコンテナからスライドします。ここでの解決策は、とjivingていなかったいくつかの理由