Auto height to update slider height based on slide height

[sorcamarian]

Add a automatic height option to update the slider's height based on the height of a slide.

https://splidejs.com/guides/options/#autoheight
autoHeight : true does not do that.

Something like this:
https://owlcarousel2.github.io/OwlCarousel2/demos/autoheight.html

[schregsimone]

Yes, please! Adaptive height is very important for sliders on mobile.

[ToshY]

The maintainer did not want to add this, see #227.

However good news is that it's relatively easy to add it yourself, see this comment.

@NaotoshiFujita , are you willing to reconsider this improvement as more people seem to gain interest in it?

[kristiansp]

I expanded a bit on some techniques mention on issue #227 and made it into an extension. Since that discussion is closed, I can repost it here. If anyone can improve on it, I'd be very happy for it – but it seems to work.

I've added the following (default) settings, that can simply be added to the options object (or be omitted to use default values):

adjustableHeight: {
  whileSliding: true,
  speed: '0.4s',
},

You can keep the extension in the same file as where you're initializing the Splide slider, and add it to the splide like this:

mySplide.mount({AdjustableHeight});

Here's the extension:

export function AdjustableHeight( Splide, Components, options) {

  // Useful elements
  const track = Components.Elements.track;
  const list = Components.Elements.list;

  // Custom options or using defaults
  const defaults = {
    'whileSliding': true,
    'speed': '0.4s',
  }

  let settings = defaults;
  const custom = options.adjustableHeight;

  if (custom) {
    settings.whileSliding = custom.whileSliding ?? defaults.whileSliding;
    settings.speed = custom.speed ?? defaults.speed;
  }

  function mount() {
    const eventType = settings.whileSliding ? 'move active resize' : 'active resized';
    Splide.on( eventType, adjustHeight );
  }

  function adjustHeight() {

    // When "whileSliding" is true it means altering the track element, when false means altering the list
    let element = settings.whileSliding ? track : list;
    let slideHeight = Components.Slides.getAt( typeof( newIndex ) == 'number' ? newIndex : Splide.index ).slide.offsetHeight;

    // If changing track height, add additional padding on the track element to the total height
    let trackStyle = track.currentStyle || window.getComputedStyle(track);
    let trackPadding = parseInt(trackStyle.paddingTop) + parseInt(trackStyle.paddingBottom);
    let totalHeight = (settings.whileSliding) ? slideHeight + trackPadding : slideHeight;

    // Let flex items have individual heights
    list.style.alignItems = 'flex-start';

    // Set transition and height
    element.style.transition = 'height ' + settings.speed;
    element.style.height = totalHeight + 'px';
  }

  return {
    mount,
  };
}

NOTE: It also works with dragging, with the only caveat being that when dragging the carousel, the height will adjust after the slide has changed, even when whileDragging is set to true. I don't think there's any way around this without doing something like pre-empting which slide you are dragging towards, and resetting it if you don't complete the drag. This seems like overkill.