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

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

Answer 2

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 3

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 4

No hacks, this is using the custom events in 6.2.1. After creating the slider(s) for the page, setup a window resize handler, and within that for each slider get the new height and use the 'configuration' event to reset the height of that slider. Finally trigger the 'updateSizes' event. The relevant code:

var options = {
  responsive: true,
  height: 'auto',
  onCreate: function() { jQuery(window).on('resize', resizeMyslider); },
  // remaining options
  ...
};
myslider.carouFredSel(options);

function resizeMyslider(e) {
  var newHeight = 0;
  // Get new height of items (be sure css isn't setting a fixed height)
  myslider.children().map(
    function() {
      newHeight = Math.max(newHeight, jQuery(this).height());
    }
  );
  // Change configuration of slider
  myslider.trigger('configuration', ['height', newHeight + 'px']);
  // Tell slider to use new configuration height
  myslider.trigger('updateSizes');
}

Ideally you'd implement the window resize event through a timeout or requestanimationframe, but this is the basics.

Answer 5

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 6

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