carouFredSel响应高度

时间：2012-11-01 15:36:22

标签： javascript responsive-design caroufredsel

我使用carouFredSel在响应式旋转木马上遇到高度问题。

因为图像是响应式的，旋转木马也设置为响应。

它仍然会将图像的最大高度添加到div。

当我的图像宽740且高度为960时，它会将图像调整为响应宽度以适合屏幕，图像也会重新调整以适应宽度，但div似乎仍然认为图像具有高度960。

如何解决此问题？

14 个答案:

答案 0 :(得分：32)

我刚才偶然发现了这个问题;我找到的唯一解决方案是在调整浏览器大小时调整容器大小。它可以解决这个问题，但我的学究者并不喜欢它。

我只引用了旋转木马，并添加了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插件。另外，谁现在需要破解滑块以使其响应？！

答案 1 :(得分：23)

对我有用（甚至早在我的模板6.0.3版本中）：

设定高度：＆＃39;变量＆＃39;在两个项目和主要选项中：

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

我可以在任何时候调整大小，不再在DIV中播放文本......

答案 2 :(得分：2)

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

答案 3 :(得分：1)

我在carouFredsel 6.2.0中遇到了一个问题，其中创建的包装器在给定高度时更新了它的高度OK：配置中的'变量'，但实际的项目列表将与第一项的高度相关。然后，这会删除任何比第一个更高的后续项目。 updateSizes触发器似乎没有做任何事情，所以我使用onAfter事件解决了它; 

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

答案 4 :(得分：1)

没有技巧，这是使用6.2.1中的自定义事件。在为页面创建滑块之后，设置一个窗口调整大小处理程序，并在其中为每个滑块获取新的高度，并使用'configuration'事件重置该滑块的高度。最后触发“ 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实现窗口调整大小事件，但这是基础。

答案 5 :(得分：0)

我在使用CSS媒体查询来设置caroufredsel_wrapper元素的维度方面取得了一些成功，使用！important，如下所示：

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

然后我能够摆脱上述答案中的onCreate内容。性能也要高得多，因为绑定到window.resize事件可以在单次调整大小时拖动窗口框架多次触发函数。

答案 6 :(得分：0)

我遇到了同样的问题并做了以下事情：

删除了从3648到3652的行，这些行看起来像：

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

此代码位于函数ms_getLargestSize。

中

这解决了List高度问题。为了解决包装器高度我在第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那样裁剪元素！

我希望它有所帮助， Rafael Angeline

答案 7 :(得分：0)

高度：“自动”表示旋转木马的高度将与内部最高项目的高度一样，包括非可见项目！在响应模式下，只有可见项目的高度会发生变化，因此旋转木马的高度仍然相同。 （没有可见的项目不会被更改。）

你应该使用height：“variable”代替它，它会根据可见项目的高度自动调整轮播的大小。

更多内容请参阅规范：http://caroufredsel.dev7studios.com/configuration.php

希望这会有所帮助。关心Dirch

答案 8 :(得分：0)

http://caroufredsel.dev7studios.com/examples/responsive-carousels.php 诀窍是在物品内部制作宽度和高度。

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

问候拉斯

答案 9 :(得分：0)

为插件和为我工作的项目指定100％的高度：

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

答案 10 :(得分：0)

我认为Lars有正确的想法，如果您为高度指定了％并且您启用了响应：真实，那么您不会给它一定百分比的父包装，而是宣布％的比例为高度宽度。因此，如果您的滑块宽度为1000px宽，并且您希望在全宽设置时高度为500px 高度：“50％”将为您提供正确的起始高度，您的图像将根据页面大小调整进行刷新

请参阅本页第二个示例中的代码http://docs.dev7studios.com/caroufredsel-old/examples/responsive-carousels.php

答案 11 :(得分：0)

我弄明白了，caroufredsel reponsive工作得很好你只需要让你的图像css像这样。

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

caroufredsel响应功能只会让你的图像高度不需要jquery / javascript就可以了。

答案 12 :(得分：0)

皮埃尔的答案几乎可行，除了它没有检查最高的幻灯片，它会检查第一张幻灯片的高度。在我的幻灯片放映中，第五张幻灯片更高，并且被切断了。

然而，经过修修补补后，我发现在调整大小时使用配置会强制正确的高度！因此，作为一种替代方案，这就是它的功能，打开调试。

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');
  }
});​

答案 13 :(得分：-1)

我的情景是：

1）在Firefox上，carouFredSel carousal中的图像会响应，也就是说，当我们更改窗口大小时，可以在caroufredsel_wrapper上将图像调整为新的宽度和高度。

2）在Chrome上，carousal中的图片不显示。但是当我们改变屏幕尺寸时，即使是一点点，图像也会非常出现并且反应灵敏。

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。它只是初始的全屏尺寸，当我们设置“responsive：ture”时，carouFredSel应该可以自动计算所有图像的大小。但为什么会这样呢？

检查源代码，我们可以在Chrome上看到，.caroufredsel_wrapper height = 0。一旦我们稍微更改浏览器大小，它将是height = 706（例如，在我的情况下）。

我尝试使用resize事件（如下所示），将包装器设置为一个初始大小，除了我设置固定值之外它不起作用，如706.但是如果我们设置一个固定值，它将始终是这个高度。 

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

我们可以调试js，并且默认情况下看到返回的高度为0，甚至我们在初始化时将每个项目图像设置为一个固定值。

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

到目前为止，我们可以假设在初始化carouFredSel对象时，carouFreSel js无法正确创建高度。最后，我尝试进行此更改，因为看起来carouFredSel在Chrome上启动时计算图像高度时会出现一些“错误”（我猜）。

<script type="text/javascript">
    //jQuery(document).ready(function(){
    jQuery(window).load(function(){ /* */
        initMediaGallery();
    });
</script>
相关问题
最新问题