16

carouFredSel を使用してレスポンシブ カルーセルの高さに問題があります。

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

画像の最大高さをdivに追加します。

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

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

4

14 に答える 14

24

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

height: 'variable' を両方の項目と次のような主なオプションに設定していました:

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

いつでもサイズを変更できますが、DIV などのテキストが切り取られることはありません...

于 2013-07-25T04:01:22.290 に答える
2 
$('#foo2').carouFredSel({
      responsive: true,
      auto: true,
      width: "100%",
      height: "100%",
      scroll: 3,
      prev: '#prev4',
      next: '#next4',
      items: {
        width: '100%',
        height: '100%'
      }
    }).trigger('resize');
于 2013-09-23T15:41:53.250 に答える
1

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);
  }
 }
于 2013-06-20T08:58:50.310 に答える
1

これは 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 を介してウィンドウ サイズ変更イベントを実装するのが理想的ですが、これが基本です。

于 2019-04-01T21:39:39.840 に答える
0

高さ: 「自動」は、カルーセルの高さが、非表示アイテムも含めて内部の最も高いアイテムと同じ高さになることを意味します! レスポンシブ モードでは、表示されるアイテムの高さのみが変更されるため、カルーセルの高さは変わりません。(表示されないアイテムは変更されません。)

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

詳細は仕様をご覧ください: http://caroufredsel.dev7studios.com/configuration.php

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

于 2013-03-01T14:56:26.367 に答える
0

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

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

こんにちはラーズ

于 2013-03-09T22:41:35.533 に答える
0

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

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

于 2013-12-23T22:05:10.050 に答える
0

私はそれを理解しています、caroufredselレスポンシブはうまく機能します。画像のcssをこのようにする必要があります。

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

caroufredsel レスポンシブ機能は、画像の高さを取得するだけです。jquery/javascript は必要ありません。

于 2014-03-27T00:11:31.847 に答える
0

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

$('#carousel').carouFredSel({
    responsive: true,
    width: '100%',
    height: '100%',
    items: {
        height: '100%'
    }
});
于 2013-12-19T00:32:40.630 に答える
0

これと同じ問題があり、次のことを行いました。

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

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

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

これにより、リストの高さの問題が解決されました。ラッパーの高さを解決するために、行 ~3609 でパラメーターを 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 などの要素をトリミングしなくなりました!

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

于 2013-02-10T23:16:30.640 に答える
0

ピエールの答えは、最も高いスライドをチェックせず、最初のスライドの高さをチェックすることを除いて、ほとんど機能します。私のスライド ショーでは、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');
  }
});​
于 2014-05-20T01:12:05.190 に答える
-1

私のシナリオは次のとおりです。

1) Firefox では、carouFredSel カルーサルの画像はレスポンシブになります。つまり、ウィンドウ サイズを変更すると、caroufredsel_wrapper で画像を新しい幅と高さに調整できます。

2) Chrome では、カルーサルの画像が表示されません。しかし、画面サイズを少しでも変更すると、画像は重要ではなく、応答性が高くなります。

var $j = jQuery.noConflict();

/**
 * Init media gallery. Init carousel. Init zoom.
 */
function initMediaGallery() {

...

$j('#prod-gal').carouFredSel({
    direction       : "left",
    responsive      : true,
    width           : "100%",
    height          : "null",
    prev            : ".slick-prev",
    next            : ".slick-next",
    items : {
        display     : "block",
        float       : "left",
        height      : "706",
        visible     : 2,
        start       : 0
    },
    scroll : {
        items : {
            visible:
            {
                min: 2,
                max: 2
            }
        },
        easing          : "swing",
        duration        : 150,
        pauseOnHover    : true
    },
    auto    :   {
        play            : false,
        timeoutDuration : 2000,
    },
    pagination: {
        container       : ".pagination",
        anchorBuilder   : false
    },

});

}

**私の理解では、私の場合、画像の高さは「可変」または706のような1つの固定値にすることができます。これは初期の全画面サイズに過ぎず、"responsive: ture" を設定すると、carouFredSel はすべての画像のサイズを自動的に計算できるはずです。しかし、なぜこれが起こるのですか??

ソース コードを確認すると、Chrome で .caroufredsel_wrapper の高さが 0 になっていることがわかります。ブラウザーのサイズを少し変更すると、height=706 になります (たとえば、私の場合)。

サイズ変更イベント (次のような) を使用して、ラッパーを 1 つの初期サイズに設定しようとしましたが、706 などの固定値を設定する以外は機能しません。ただし、1 つの固定値を設定すると、常にこの高さになります。

    onCreate: function () {
        var self = this;
        $j(window).on('resize', function () {
            $j(self).parent().height($j(self).children().first().height());
        }).trigger('resize');
    }

js をデバッグすると、返された高さがデフォルトで 0 であることを確認できます。初期化時に各アイテムの画像に 1 つの修正値を設定してもです。

console.log($j(self).children().first().height());

ここまでは、carouFredSel オブジェクトを初期化するときに、carouFreSel js によって高さが適切に作成されていないと推測できます。最後に、この変更を試みます。これは、Chrome での開始時に画像の高さを計算するときに、carouFredSel に「バグ」があるように見えるためです (推測します)。

<script type="text/javascript">
    //jQuery(document).ready(function(){
    jQuery(window).load(function(){ /* */
        initMediaGallery();
    });
</script>
于 2015-02-05T04:10:08.610 に答える