1

ブートストラップとフクロウのカルーセルを組み合わせて、レスポンシブな画像ギャラリーのブラウジング エクスペリエンスを実現しようとしています。高さが固定された固定ヘッダーと、高さが固定された固定フッターがあります。

ここでの私の目標は、画像の高さに関係なく、スライダー内の画像が常にフッターのヘッダーの中央に配置されるようにすることです。これを達成するために、フッターとヘッダーの間にある種の動的コンテナを作成する簡単な方法や、画像のサイズを変更するための気の利いたJavaスクリプトを作成する簡単な方法はありますか? （ソリューションはモバイルでも機能する必要があることに注意してください）

これが私のjsfiddleの例です http://jsfiddle.net/Tenacity/GMu2x/

私の心はこれに似た何かを考えています

.img .owl-carousel {
 width:xx%;
 height:xx%;
 margin-top:xx%;
 margin-bottom:xx%;
 margin-left:xx%;
 margin-right:xx%;
 }

そして、xx は画面の高さと幅に基づいて動的に計算されると考えています

私の例を見ると、現在、margin-top css属性を使用して、すべての画像を上から約60px左から右にスクロールしていますが、これはもちろん上からより良い解決策で削除しますが、達成したいそれらが表示されるときは常にデッドセンターの画像。

前もって感謝します

4

1 に答える 1

0 

.owl-carousel .owl-item{
    height:550px;
    width:1200px;
}
.owl-carousel .owl-item img {
    height:550px;
    width:auto;
}
.bg-holder{
    text-align: center;
}
<div class="owl-carousel owl-slider" id="owl-carousel-slider" data-inner-pagination="true" data-white-pagination="true">
<div class="bg-holder">
 <!-- your content images goes here -->
</div>
</div>

于 2015-09-15T05:31:45.960 に答える