Equal Height Query Loop Slider

How To
1

Hi Fellas, here is the slider widget created as query loop, in my loop has some information about custom post type such as; post title, price and some info’s about post type, my problem is that I can not make these sliders as same equal cause my custom post type title paragraph lengths varying.

Even I selected slider block align-self as stretch and I enabled auto hight for slider, but it didn’t worked.

How can I make these slider columns as same height?

Ekran Resmi 2024-01-12 18.17.07
Ekran Resmi 2024-01-12 18.17.071920×1003 108 KB

2

This shows you applied the stretch value to the single slide element. Have you tried adding stretch to the “Slider (nestable)” element instead?

Also, look into disabling the auto-height setting in the slider options and setting your desired height. Maybe that helps.

3

There are a couple of options for that.

  1. You can make the title only go for two rows.
  2. You can give that block with title, details, buttons a min-height

I’m sure there are more ways but this is on top of my head.

4

Guys thanks for your reply, Here’s how it worked I gave min-height which is in my Figma file frame height to tour details block and its worked. :man_dancing:

5

This code may help - set slider height to auto and put there this JS:


(function() {
  function setEqualSlideHeights(sliderElement) {
    if (!sliderElement) return;
    
    const slides = sliderElement.querySelectorAll('.splide__slide');
    if (slides.length === 0) return;
    
    slides.forEach(slide => {
      slide.style.height = 'auto';
    });
    
    let maxHeight = 0;
    slides.forEach(slide => {
      const slideHeight = slide.scrollHeight;
      if (slideHeight > maxHeight) {
        maxHeight = slideHeight;
      }
    });
    
    if (maxHeight > 0) {
      slides.forEach(slide => {
        slide.style.height = maxHeight + 'px';
      });
    }
    
    if (sliderElement.splide) {
      sliderElement.splide.refresh();
    }
  }
  
  function initSliders() {
    const sliders = document.querySelectorAll('.brxe-slider-nested');
    
    sliders.forEach(slider => {
      if (slider.classList.contains('is-initialized')) {
        setEqualSlideHeights(slider);
      } else {
        const observer = new MutationObserver((mutations) => {
          if (slider.classList.contains('is-initialized')) {
            setEqualSlideHeights(slider);
            observer.disconnect();
          }
        });
        observer.observe(slider, { attributes: true, attributeFilter: ['class'] });
      }
    });
  }
  
  //load
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', function() {
      setTimeout(initSliders, 500);
    });
  } else {
    setTimeout(initSliders, 500);
  }
  
  // resize
  let resizeTimer;
  window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      initSliders();
    }, 250);
  });
})();