web-dev-qa-db-ja.com

Twitter Bootstrapカルーセルの異なる高さの画像により矢印がバウンドします

私はBootstrapのカルーセルクラスを使用してきましたが、これまでは簡単でしたが、1つの問題は、高さが異なると矢印が上下にバウンドして新しい高さに調整されることです。

これは、カルーセルに使用しているコードです。

<div id="myCarousel" class="carousel slide">
    <div class="carousel-inner">
        <div class="item active">
            <img src="image_url_300height"/>
            <div class="carousel-caption">
                <h4>...</h4>
                <p>...</p>
            </div>
        </div>
        <div class="item">
            <img src="image_url_700height" />
        </div>
    </div>
    <!-- Carousel nav -->
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div>

この問題は、これにも示されています jsfiddle （確かに私のものではありません。この問題を解決しようとして別の質問で見つけました！）

私の質問は次のとおりです。キャプションと矢印をカルーセルに対して静的な位置に保ちながら、カルーセルを固定の高さ（フィドルの2番目のサムネイル）に固定し、小さな画像を中央に配置するにはどうすればよいですか？

twitter-bootstrapcarousel
61
steve-gregory

bootstrap less/CSSは、応答するために幅を変更する必要がある場合に画像の伸縮を避けるために、自動高さを強制するように見えます。幅を自動にし、高さを修正するために切り替えました。

<div class="item peopleCarouselImg">
  <img src="http://upload.wikimedia.org/...">
  ...
</div>

次に、次のようにpeopleCarouselImgクラスを使用してimgを定義します。

.peopleCarouselImg img {
  width: auto;
  height: 225px;
  max-height: 225px;
}

私は身長を225pxに固定します。アスペクト比を正しく保つために、幅を自動的に調整します。

これは私にとってはうまくいくようです。

83
jduprey

これを試してください（私は SASS を使用しています）：

.carousel {
  max-height: 700px;
  overflow: hidden;

  .item img {
    width: 100%;
    height: auto;
  }
}

必要に応じて、.carouselを.containerにラップできます。

16
Khairul Anwar

Bootstrapカルーセルのスライドの高さを正規化するこのjQueryコードで試してください

function carouselNormalization() {
  var items = $('#carousel-example-generic .item'), //grab all slides
    heights = [], //create empty array to store height values
    tallest; //create variable to make note of the tallest slide

  if (items.length) {
    function normalizeHeights() {
      items.each(function() { //add heights to array
        heights.Push($(this).height());
      });
      tallest = Math.max.apply(null, heights); //cache largest value
      items.each(function() {
        $(this).css('min-height', tallest + 'px');
      });
    };
    normalizeHeights();

    $(window).on('resize orientationchange', function() {
      tallest = 0, heights.length = 0; //reset vars
      items.each(function() {
        $(this).css('min-height', '0'); //reset min-height
      });
      normalizeHeights(); //run it again 
    });
  }
}
11
Mile Mijatovic

ここに私のために働いた解決策があります。カルーセルのコンテンツは、ユーザーが送信したコンテンツから動的に生成されたため、このようにしました（したがって、スタイルシートで静的な高さを使用できませんでした）-このソリューションは、異なるサイズの画面でも機能するはずです：

function updateCarouselSizes(){
  jQuery(".carousel").each(function(){
    // I wanted an absolute minimum of 10 pixels
    var maxheight=10; 
    if(jQuery(this).find('.item,.carousel-item').length) {
      // We've found one or more item within the Carousel...
      jQuery(this).carousel(); // Initialise the carousel (include options as appropriate)
      // Now we iterate through each item within the carousel...
      jQuery(this).find('.item,.carousel-item').each(function(k,v){ 
        if(jQuery(this).outerHeight()>maxheight) {
          // This item is the tallest we've found so far, so store the result...
          maxheight=jQuery(this).outerHeight();
        }
      });
      // Finally we set the carousel's min-height to the value we've found to be the tallest...
      jQuery(this).css("min-height",maxheight+"px");
    }
  });
}

jQuery(function(){
  jQuery(window).on("resize",updateCarouselSizes);
  updateCarouselSizes();
}

技術的にはこれはレスポンシブではありませんが、私の目的のためにon window resizeはこれをレスポンシブに動作させます。

4
SteJ

前に示した解決策は、画像がカルーセルボックスには小さすぎる場合があります。バンプコントロールの問題に対する適切な解決策は、Bootstraps CSSをオーバーライドすることです。

元のコード：

.carousel-control {
top: 40%;
}

独自のスタイルシート内の固定値で変数をオーバーライドします（私の設計では300ピクセルが機能しました）。

.carousel-control {
top: 300px;
}

これが問題を解決することを願っています。

2
Oliveira

誰かがバウンド画像のカルーセルの問題を解決するために熱心にグーグルで動いている場合、これは私を助けました：

.fusion-carousel .fusion-carousel-item img {
    width: auto;
    height: 146px;
    max-height: 146px;
    object-fit: contain;
}
2
Kyle Pennell

このJavaScriptをフッターに含めます（jQueryをロードした後）：

$('.item').css('min-height',$('.item').height());
1
Ankit Shukla

高さを固定せずに任意の高さの画像でこの作業を行いたい場合は、次のようにします：

$('#myCarousel').on("slide.bs.carousel", function(){
     $(".carousel-control",this).css('top',($(".active img",this).height()*0.46)+'px');
     $(this).off("slide.bs.carousel");
});
1
awfullyawful

最近、私はこのCSSソースをBootstrapカルーセルでテストしています

380に設定された高さは、表示されている最大/最も高い画像に等しく設定する必要があります...

次のCSSのおかげで、ユーザビリティテストに基づいてこの回答に賛成票を投じてください。

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  max-height: 100%;
  max-height: 380px;
  margin-bottom: 60px;
  height:auto;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  z-index: 10;
    background: rgba(0, 0, 0, 0.45);
}

/* Declare heights because of positioning of img element */
.carousel .item {
  max-height: 100%;
  max-height: 380px;
  background-color: #777;
}
.carousel-inner > .item > img {
 /*  position: absolute;*/
  top: 0;
  left: 0;
  min-width: 40%;
  max-width: 100%;
  max-height: 380px;
  width: auto;
  margin-right:auto;
  margin-left:auto;
  height:auto;

}
1
CrandellWS

このコードを使用して、すべてのカルーセル画像に調整することもできます。

.carousel-item{
    width: 100%; /*width you want*/
    height: 500px; /*height you want*/
    overflow: hidden;
}
.carousel-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
1
MrAnyx
 .className{
 width: auto;
  height: 200px;
  max-height: 200px;
   max-width:200px
   object-fit: contain;
}
0
arvind grey

このjQuery関数は私にとって最適に機能しました。 bootstrapテーマ内でWordPress 4を使用していますが、jQuery slimではなく完全なjQueryを使用しました。

// Set all carousel items to the same height
function carouselNormalization() {

    window.heights = [], //create empty array to store height values
    window.tallest; //create variable to make note of the tallest slide

    function normalizeHeights() {
        jQuery('#latest-blog-posts .carousel-item').each(function() { //add heights to array
            window.heights.Push(jQuery(this).outerHeight());
        });
        window.tallest = Math.max.apply(null, window.heights); //cache largest value
        jQuery('#latest-blog-posts .carousel-item').each(function() {
            jQuery(this).css('min-height',tallest + 'px');
        });
    }
    normalizeHeights();

    jQuery(window).on('resize orientationchange', function () {

        window.tallest = 0, window.heights.length = 0; //reset vars
        jQuery('.sc_slides .item').each(function() {
            jQuery(this).css('min-height','0'); //reset min-height
        }); 

        normalizeHeights(); //run it again 

    });

}

jQuery( document ).ready(function() {
    carouselNormalization();
});

ソース：

https://Gist.github.com/mbacon40/eff3015fe96582806da5

0
createscape

Cssファイルで次の行を使用できます。

ul[rn-carousel] {
 > li {
 position: relative;
 margin-left: -100%;

 &:first-child {
   margin-left: 0;
   }
  }
}
0
Hetdev