Replies: 2 comments
-
+1 to this. I would love this feature. |
Beta Was this translation helpful? Give feedback.
-
I had this issue recently myself! Attempt No. 1At first I tried fixing it with flexbox CSS:
.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 Attempt No. 2After 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 );
}
} ); Hopefully this isn't too hacky. It's worked well for me thus far, cheers! |
Beta Was this translation helpful? Give feedback.
-
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:
Beta Was this translation helpful? Give feedback.
All reactions