Glide: Normalize height

[railaru]

Hey, I have an issue with normalizing slide height to the largest one. I wrote a simple function for that:

function normaliseSlideHeight(selector) {

  const slides = document.querySelectorAll(selector);
  const slideHeights = [];

  slides.forEach((slide) => slideHeights.push(slide.scrollHeight));

  const tallestSlideHeight = Math.max(...slideHeights);

  slides.forEach((slide) => slide.style.minHeight = tallestSlideHeight + 'px');
}

My problem is that I have to use a time out for it to work. It seems like the peek calculation of glide.js changes the default height of slider items.

setTimeout(() => { normaliseSlideHeight('.backers-mobile-slider .ln-card'); }, 75);

Glide.js config:
const glide = new Glide(sliderSelector, { bound: true, perView: 2, gap: 10, peek: 30, breakpoints: { 767: { perView: 1, }, }, });

I tried using callbacks like build.after and mount.after instead of time out, but they both seem to run before peek calculation.

Has anyone faced a similar issue? Appreciate the help

[wiseoldman]

I see this issue is 2 weeks old, but this should be possible with CSS.

.glide__slides has display: flex

.glide__slide has height: 100% so you just have to apply height: auto instead if you want them to be equal heights

[shuantsu]

I have a div inside the glide__slide and this made it work:

_glide.scss

.glide__track {
  > div {
  display: flex;
  margin-bottom: 30px!important;
    > div {
    flex: 1;
      > div {
      height: 100%;
      }
    }
  }
}