carouFredSel responsive height

Question

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

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

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

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?

Answer 1

Pierre's answer almost works, except it doesn't check for the tallest slide, it checks for the first slide's height. In my slide show, the 5th slide in was taller, and wound up getting cut off.

However, after tinkering, I found that playing with the configuration on resize forces the correct height! So, as an alternative, here's that function, turning the debug on.

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

Answer 2

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.

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

---

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 ?!

Answer 3

I figure it out, the caroufredsel reponsive works fine you just need to make your css of the image to be like this.

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

The caroufredsel responsive functionality will just get you image height No need for jquery/javascript then thats it.

Answer 4

My scenario is:

1) on Firefox, the images in carouFredSel carousal would be responsive, that is when we change window size, the image can be adjusted to new width and height on caroufredsel_wrapper.

2) on Chrome, the images in carousal do not show. But when we change the screen size, even a bit, the images would come out immaterially and be responsive.

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
    },

});

}

** On my understanding, the image height can be "variable" or one fixed value, like 706, in my case. it's just the initial full screen size, and when we set "responsive: ture", carouFredSel should can calculate size for all images automatically. But why this happen??

Check source code, we can see on Chrome, the .caroufredsel_wrapper height=0. Once we change the browser size a bit, it would be height=706 (for example, on my case).

I tried to use resize event (like following), to set the wrapper one initial size and it's not working except i set fixed value, like 706. But if we set one fixed value, it would be always be this height.

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

We can debug the js, and see the returned height is 0 as default, even we set each item image one fix value when initialize them.

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

Up to this moment, we can suppose when initialize the carouFredSel object, the height hasn't can be created properly by carouFreSel js. At last, I try to make this change because it looks like carouFredSel has some 'bugs' when calculate the image height when initiation on Chrome (I guess).

<script type="text/javascript">
    //jQuery(document).ready(function(){
    jQuery(window).load(function(){ /* */
        initMediaGallery();
    });
</script>

Answer 5

I've had some success in just using CSS media queries to set the dimensions of the caroufredsel_wrapper element, using !important, like this:

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

I was then able to get rid of the onCreate stuff from the above answer. Much more performant too, as binding to the window.resize event can trigger the function many times when dragging the window frame during a single resize.

Answer 6

I had this same issue and did the following:

Removed the lines from 3648 to 3652, these lines looks like:

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

And this code is inside function ms_getLargestSize.

This solved the List height problem. To solve the wrapper height I changed from true to false the param at line ~3609, the line looks like:

var sz = cf_mapWrapperSizes(ms_getSizes($v, o, true), o, false);

Change to:

var sz = cf_mapWrapperSizes(ms_getSizes($v, o, false), o, false);

After this, the slider is working fine when resized and isn't cropping the elements like divs anymore!

I hope it helps, Rafael Angeline