javascript - carouFredSel 响应高度

标签 javascript responsive-design caroufredsel

我在使用 carouFredSel 时遇到响应式轮播的高度问题。

因为图像是响应式的,轮播也设置为响应式。

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

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

我该如何解决这个问题?

最佳答案

我刚才偶然发现了这个问题;我找到的唯一解决方案是在调整浏览器大小时调整容器的大小。它确实有用,但我这个学究式的人不太喜欢它。

我只引用了轮播,并添加了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 插件。另外,如今谁需要破解 slider 以使其具有响应能力?!

关于javascript - carouFredSel 响应高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13180445/

相关文章:

javascript - 无法使用 "this"定义方法

javascript - 将 Botium 脚本内存变量传递到断言器中

html - 如何在 Bootstrap 3 的网格内对齐(上、下、右、左)内容

javascript - 超出视口(viewport)时停止 slider 滚动?

javascript - carouFredsel 中的暂停事件

jQuery:使用 carouFredSel 插件进行延迟加载

javascript - jQuerymobile ListView 中动态添加的复选框未正确呈现

javascript - 如何实现响应式表格的交替行样式?

javascript - 根据分辨率渲染 html

javascript - 元素出现但不是子元素的选择器