carouFredSel responsive height

问题:

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?

回答1:

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

回答2:

What worked for me (even as far back as version 6.0.3 from my template):

Was setting height: 'variable' in both items AND main options like:

    $('#foo').carouFredSel({
    responsive: true,
    width: '100%',
    height: 'variable',
    items: {
        height: 'variable'
    }
});

I can resize at any point and no it longer crops the text in the DIVs etc...

回答3:

$('#foo2').carouFredSel({
      responsive: true,
      auto: true,
      width: "100%",
      height: "100%",
      scroll: 3,
      prev: '#prev4',
      next: '#next4',
      items: {
        width: '100%',
        height: '100%'
      }
    }).trigger('resize');

回答4:

I had an issue in carouFredsel 6.2.0 where the wrapper that's created updated it's height OK when given height:'variable' in the config, but the actual list of items would be stuck with the height of the first item. This then cropped off any subsequent items that were taller than the first. The updateSizes trigger didn't seem to do anything, so I solved it using the onAfter event;

scroll : {
  onAfter : function( data ) {          
    var carousel_height = $(this).parents('.caroufredsel_wrapper').css('height');
    $(this).css('height', carousel_height);
  }
 }

回答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.

回答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

回答7:

height: "auto" means that the height of the carousel will be as height as the highest item inside including non visible items as well! In responsive mode only the height of the visible items will be changed so the height of the carousel will be still the same. (None visible items won't be changed.)

You should use height: "variable" instead which automatically resizes the carousel depending on the height of the visible items only.

More to find in the specs: http://caroufredsel.dev7studios.com/configuration.php

Hope this helps. Regards Dirch

回答8:

http://caroufredsel.dev7studios.com/examples/responsive-carousels.php the trick is to make the width and height inside items.

$("#foo2").carouFredSel({
    responsive  : true,
    scroll      : {
        fx          : "crossfade"
    },
    items       : {
        visible     : 1,
        width       : 870,
        height      : "46%"
    }
});

Greetings Lars

回答9:

Specifying a 100% height for both the plugin AND the items worked for me:

$('#carousel').carouFredSel({
    responsive: true,
    width: '100%',
    height: '100%',
    items: {
        height: '100%'
    }
});

回答10:

I think Lars had the right idea, if you specify a % for height and you have Responsive : true enabled you are NOT giving it a percentage of the Parent wrapper you are declaring a % ratio of Height to Width. Therefore if your slider is 1000px wide at full width and you want it 500px tall at full width setting height : "50%" will give you the correct starting height and your image will be refreshed based on page resizing.

see the code from the second example on this page http://docs.dev7studios.com/caroufredsel-old/examples/responsive-carousels.php

回答11:

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.

回答12:

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

回答13:

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>