add support for items auto height

[AndreyFedarovich]

hooper should be able to adjust according to the height of the contents Example: https://owlcarousel2.github.io/OwlCarousel2/demos/autoheight.html

[StanZhuravlev]

I would like to support this request. Also need such a function.

[iainwoodou]

Just add .hooper{ height:auto !important; } to your css and it should size appropriately

[Leolik]

Just add .hooper{ height:auto !important; } to your css and it should size appropriately

in this case the wrong width is calculated for the items

[nikolayandreev]

So I have a temporary solution, but it's not pretty! :( Btw I've had problems with this on several ocasions, it's insane that it's not in the otherwise amazing plugin..

So you can use the slide hooper event like this:

HTML: <hooper @slide="onSlide"></hooper>

CSS:

.hooper-list {
  max-height: 300px; // use a max-width that wouldn't be exceeded.
  transition: all 0.1s; // use preferred transition time
}

JS:

methods: {
  onSlide(payload) {
      const hooperList = document.querySelector(".promotions-wrap .hooper-list");
      setTimeout(function() { // use setTimeout otherwise you get value for previous slide for some reason..
        const hooperHeight = document.querySelector(".promotions-wrap .hooper-slide.is-active.is-current").clientHeight;
        hooperList.style.maxHeight = hooperHeight + "px";
      }, 100);
    }
}