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 ad

Answer 1

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).