carouFredSel 响应高度 [英] carouFredSel responsive height

问题描述

我在使用 carouFredSel 时遇到响应式旋转木马的高度问题.

i am having height problems of my responsive carousel using carouFredSel.

因为图像具有响应性并且轮播也设置为响应性.

since the images are responsive and the carousel is also set to responsive.

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

It still adds the max height of the image to the div.

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

When my images are 740 wide and the height is 960. it resizes the image to the responsive width to fit the screen, the image is also rescaled to fit the width but the div seems to still think theres an image with the height of 960.

我该如何解决这个问题?

How do i resolve this issue?

推荐答案

我不久前偶然发现了这个问题；我找到的唯一解决方案是在调整浏览器大小时调整容器的大小.它确实有效，但我的书呆子不太喜欢它.

I stumbled upon this issue a while ago; the only solution I found is to resize the container when the browser is being resized. It does the trick but the pedant in me doesn't like it much.

我只引用了carousel，并添加了onCreate函数:

I only made a reference to the carousel, and added the onCreate function:

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 插件.另外，现在谁需要破解滑块才能使其响应?！

---

If you are still using this plugin in 2015, then it's time to move on.
The free version is no longer supported and the commercial version is now a Wordpress plugin. Plus who needs to hack a slider to make it responsive nowadays ?!

这篇关于carouFredSel 响应高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！