web-dev-qa-db-ja.com

carouFredSelレスポンシブ高さ

carouFredSelを使用している応答性の高いカルーセルの高さに問題があります。

画像がレスポンシブであり、カルーセルもレスポンシブに設定されているためです。

それでも、画像の最大の高さがdivに追加されます。

画像の幅が740で高さが960の場合、画面に合わせて画像のサイズをレスポンシブな幅に変更します。画像も幅に合わせてサイズ変更されますが、divは高さ960の画像があると考えています。

この問題を解決するにはどうすればよいですか？

javascriptresponsive-designcaroufredsel
16
nytrm

少し前にこの問題に遭遇しました。私が見つけた唯一の解決策は、ブラウザーのサイズが変更されているときにコンテナーのサイズを変更することです。それはトリックをしますが、私のペダントはそれがあまり好きではありません。

カルーセルへの参照のみを作成し、onCreate関数を追加しました。

var $carousel = $("#swiper");

$carousel.carouFredSel({
  width: "100%",
  height: "auto",
  responsive: true,
  auto: true,
  scroll: { items: 1, fx: 'scroll' },
  duration: 1000,
  swipe: { onTouch: true, onMouse: true },
  items: { visible: { min: 4, max: 4 } },
  onCreate: onCreate
});​

function onCreate() {
  $(window).on('resize', onResize).trigger('resize');
}

function onResize() {
  // Get all the possible height values from the slides
  var heights = $carousel.children().map(function() { return $(this).height(); });
  // Find the max height and set it
  $carousel.parent().add($carousel).height(Math.max.apply(null, heights));
}

2015年にこのプラグインをまだ使用している場合は、次に進んでください。
無料バージョンはサポートされなくなり、商用バージョンはWordpressプラグインになりました。加えて、スライダーをハックして応答性を高める必要があるのは誰ですか？！

32
Pierre

私にとっては何がうまくいきましたか（私のテンプレートからバージョン6.0.3までさかのぼります）：

高さを設定していました：両方のアイテムと次のような主なオプションで「変数」：

    $('#foo').carouFredSel({
    responsive: true,
    width: '100%',
    height: 'variable',
    items: {
        height: 'variable'
    }
});

私はいつでもサイズを変更でき、DIVなどのテキストをトリミングしなくなりました...

23
hi-tech
$('#foo2').carouFredSel({
      responsive: true,
      auto: true,
      width: "100%",
      height: "100%",
      scroll: 3,
      prev: '#prev4',
      next: '#next4',
      items: {
        width: '100%',
        height: '100%'
      }
    }).trigger('resize');
2
Guille21

ハックなし、これは6.2.1のカスタムイベントを使用しています。ページのスライダーを作成した後、ウィンドウサイズ変更ハンドラーをセットアップし、その中で各スライダーに対して新しい高さを取得し、「構成」イベントを使用してそのスライダーの高さをリセットします。最後に「updateSizes」イベントをトリガーします。関連コード：

var options = {
  responsive: true,
  height: 'auto',
  onCreate: function() { jQuery(window).on('resize', resizeMyslider); },
  // remaining options
  ...
};
myslider.carouFredSel(options);

function resizeMyslider(e) {
  var newHeight = 0;
  // Get new height of items (be sure css isn't setting a fixed height)
  myslider.children().map(
    function() {
      newHeight = Math.max(newHeight, jQuery(this).height());
    }
  );
  // Change configuration of slider
  myslider.trigger('configuration', ['height', newHeight + 'px']);
  // Tell slider to use new configuration height
  myslider.trigger('updateSizes');
}

理想的には、タイムアウトまたはrequestanimationframeを使用してウィンドウサイズ変更イベントを実装しますが、これが基本です。

1
S2.

CarouFredsel 6.2.0で問題が発生しました。作成されたラッパーが、設定にheight： 'variable'が指定されている場合に高さOKを更新しましたが、実際のアイテムのリストは最初のアイテムの高さのままです。これにより、最初のアイテムよりも高かった後続のアイテムが削除されました。 updateSizesトリガーは何もしないようだったので、onAfterイベントを使用して解決しました。

scroll : {
  onAfter : function( data ) {          
    var carousel_height = $(this).parents('.caroufredsel_wrapper').css('height');
    $(this).css('height', carousel_height);
  }
 }
1
Luc Pestille

http://caroufredsel.dev7studios.com/examples/sensitive-carousels.php トリックは、アイテムの内側に幅と高さを作ることです。

$("#foo2").carouFredSel({
    responsive  : true,
    scroll      : {
        fx          : "crossfade"
    },
    items       : {
        visible     : 1,
        width       : 870,
        height      : "46%"
    }
});

あいさつLars

0
Lars Jendrzejewski

私はそれを理解します、画像のCSSをこのようにする必要があるだけで、カルーフレッセルのレスポンシブはうまく機能します。

.caroufredsel_wrapper ul li img{
    height: auto;
    max-width: 100%;
    width: 100%;
}

Caroufredselレスポンシブ機能は画像の高さを取得するだけで、jquery/javascriptは不要です。

0
tnchuntic

私はこれと同じ問題を抱えており、次のことを行いました：

3648から3652への行を削除しました。これらの行は次のようになります：

if (is_number(o.items[o.d[dim]]))
{
    console.log(o.d[dim]);
    return o.items[o.d[dim]];
}

そして、このコードはms_getLargestSize関数内にあります。

これにより、リストの高さの問題が解決されました。ラッパーの高さを解決するために、行〜3609でparamをtrueからfalseに変更すると、行は次のようになります。

var sz = cf_mapWrapperSizes(ms_getSizes($v, o, true), o, false);

への変更：

var sz = cf_mapWrapperSizes(ms_getSizes($v, o, false), o, false);

この後、スライダーはサイズ変更時に正常に機能し、divのような要素をトリミングしなくなります！

ラファエルアンジェリンがお役に立てば幸いです

0
Rafael Angeline

height： "auto"は、カルーセルの高さが、表示されていないアイテムも含め、内部の最も高いアイテムと同じ高さになることを意味します。レスポンシブモードでは、表示されるアイテムの高さのみが変更されるため、カルーセルの高さは変わりません。 （表示されている項目は変更されません。）

代わりにheight： "variable"を使用する必要があります。これは、表示されるアイテムの高さのみに応じてカルーセルのサイズを自動的に変更します。

仕様でさらに見つける： http://caroufredsel.dev7studios.com/configuration.php

お役に立てれば。よろしく

0
Dirch

次のように、！importantを使用して、CSSメディアクエリを使用してcaroufredsel_wrapper要素のサイズを設定するだけである程度成功しました。

.caroufredsel_wrapper {
    width: 700px !important;
    height: 393px !important;
}
@media screen and (max-width: 768px){
    .caroufredsel_wrapper {
        width: 460px !important;
        height: 258px !important;
    }
}

その後、上記の答えからonCreateのものを取り除くことができました。 1回のサイズ変更中にウィンドウフレームをドラッグすると、window.resizeイベントへのバインドによって関数が何度もトリガーされる可能性があるため、パフォーマンスが大幅に向上します。

0
Dan

プラグインとアイテムの両方に100％の高さを指定すると、うまくいきました：

$('#carousel').carouFredSel({
    responsive: true,
    width: '100%',
    height: '100%',
    items: {
        height: '100%'
    }
});
0
Tim

ピエールの答えはほとんど機能しますが、最も高いスライドをチェックせず、最初のスライドの高さをチェックします。私のスライドショーでは、5番目のスライドの方が高かったので、巻き上がって切れてしまいました。

しかし、いじくり回した後、サイズ変更の構成をいじると正しい高さが強制されることがわかりました！したがって、代わりに、デバッグをオンにする機能があります。

var carousel = $("#swiper");

carousel.carouFredSel({
  width: "100%",
  height: "auto",
  responsive: true,
  auto: true,
  scroll: {
    items: 1,
    fx: 'scroll'
  },
  duration: 1000,
  swipe: {
    onTouch: true,
    onMouse: true
  },
  items: {
    visible: {
      min: 4,
      max: 4
    }
  },
  onCreate: function () {
    $(window).on('resize', function () {
      carousel.trigger('configuration', ['debug', false, true]);
    }).trigger('resize');
  }
});​
0
Will Lanni

私はLarsが正しい考えを持っていると思います、高さの％を指定し、Responsive：trueを有効にした場合、親のパーセンテージを与えていません高さの幅に対する比率を宣言するラッパー。したがって、スライダーの幅が全幅で1000pxで、全幅の高さを500pxにしたい場合height： "50％"で正しい開始が得られます高さと画像はページのサイズ変更に基づいて更新されます。

このページの2番目の例のコードを参照してください http://docs.dev7studios.com/caroufredsel-old/examples/responsive-carousels.php

0
Nickfmc