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.

我只引用了轮播，并添加了 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屋！