Option for fixed height at tallest slide when using fade type?

[eiranix]

When using the 'fade' type, it would be very helpful to have an option to set the slider height based on the tallest slide.

This could be achieved by changing how the fade type works. At the moment I am doing it like this:

1. Set splide options as:

{
    type: loop,
    perPage: 1,
    speed: 0
}

2. Add additional CSS to convert the sliding into fading:

.splide__list {transform:none !important;}
.splide__slide {margin-left:-100%; opacity:0; transition:opacity 0.5s;}
.splide__slide:first-child {margin-left:0;}
.splide__slide.is-active {opacity:1; z-index:10;}

[clintrobinson]

+1 to this. I would love this feature.

[StuffieStephie]

I had this issue recently myself!

Attempt No. 1

At first I tried fixing it with flexbox CSS:

NOTE: I was using the React version of SplideJS (v.0.7.2) and the appropriate selector was .splide__track--fade, it seems the fade class applied to the parent in the version of SplideJS used in v.3.6.12 , that's why I've included both .splide__track--fade and .splide--fade > .splide__track selectors below.

.splide__track--fade > .splide__list,
.splide--fade > .splide__track > .splide__list {
	display: flex;
	align-items: stretch;
}

.splide__track--fade > .splide__list > .splide__slide,
.splide--fade > .splide__track > .splide__list > .splide__slide {
	position: relative;
	height: auto;
}

.splide__track--fade > .splide__list > .splide__slide.is-active,
.splide--fade > .splide__track > .splide__list > .splide__slide.is-active {
	order: -1;
}

The above used flexbox to make the child slides stretch to fit its parent height and unsets the use position: absolute for the active slide, instead setting its order to be the first and therefore visible. The problem is, this causes the slide to "flash" the background color of the parent slide and disables the fade effect and the slides are now out of position.

See demo on CodePen

Attempt No. 2

After some thought I came up with another approach that still uses flexbox, but uses JS to offset the slides so the sit on top of each other:

.splide__track--fade > .splide__list,
.splide--fade > .splide__track > .splide__list {
	display: flex;
	align-items: stretch;
}

.splide__track--fade > .splide__list > .splide__slide,
.splide--fade > .splide__track > .splide__list > .splide__slide {
	position: relative;
	height: auto;
}

/**
 * Offset slide position to be used with Flexbox CSS.
 *
 * @param {HTMLElement} slide - slide to be modified.
 * @param {number} index - Index of slide; used to calculate offset.
 */
function offsetSlidePosX( slide, index ){
  slide.style.transform = 'translateX(' + ( -100 * index ) + '%)';
}

You can execute the above function right after your Splide instance is mounted:

var splide = new Splide( '.splide', {
	type: 'fade',
	//...
} );
splide.on( 'mounted', function () {
	let carouselSlides = splide.Components.Elements.slides;
	for ( let i = 0; i < carouselSlides.length; i++ ) {
		offsetSlidePosX( carouselSlides[i], i );
	}
} );

See demo on CodePen

Hopefully this isn't too hacky. It's worked well for me thus far, cheers!

[IJustMatthew]

I solved it in Vue like this:

onMounted(() => {
    nextTick(() => {
        const items = document.querySelectorAll('.splide__list .splide__slide')
        const highest = Math.max(
            ...Array.from(items).map((el) => el.clientHeight)
        )
        items.forEach((el: any) => (el.style.height = `${highest}px`))
    })
})

It finds the highest element, and sets it's height to all the other elements as well. If you use inner divs, make sure that the div height is set to 100%.