Can I make the active slide wider while maintaining perPage?

[Webberjo]

Does Splide have a set of options, or are there styles I could use that would allow the active slide to be wider than the rest of the slides while maintaining the slider's perPage amount?
On transition, the next active slide would grow and the previous active slide would shrink.

new Splide(document.querySelector('.splide'), {
  type: 'loop',
  perMove: 1,
  perPage: 3,
  focus: 'center',
  gap: 32,
  padding: 100
}).mount();

.splide__slide {
  transition: all 0.35s ease-in-out;
}

[MarkoMalec]

Bump

[hugoburguete]

Did you find a solution for this?

[Webberjo]

Not yet.

[angie6673]

Hi! I think I think I found something with css and java script, here my code:

document.addEventListener( 'DOMContentLoaded', function() {
var splide = new Splide( '.splide', {
updateOnMove: true,
perPage: 3,
focus: 'center',
autoWidth: true,
autoHeight: true,
type: 'loop',
start: 1,
gap: '10%',
speed: 1000,
easing: 'cubic-bezier(0.25, 1, 0.5, 1)',
trimSpace: true,

}  );

splide.mount();

} );`

#materiel {
width: 100%;
height: 100vh;

}

#materiel .splide #carousel-heading {
text-align: center;
font-family: "Colonna MT";
font-size: 8em;
font-weight: lighter;
padding-top: 5%;

}

.splide__list .splide__slide img {
border-radius: 54px;
object-fit: cover;
}

.splide__slide{
opacity: 0.5;

}

.splide__slide.is-active{
transform: scale(1.3);
opacity: 1;
transition: transform 1s ease-in-out, opacity 1s ease-in-out;
border: 3px solid white;
box-shadow: 0px 0px 15px rgba(255, 255, 255, 0.7);
border-radius: 54px;

}

.splide .splide__track .splide__list {
align-items: center;
height: 600px;

}

[Webberjo]

Could you provide a jsfiddle or codepen link to your working example?

[hugoburguete]

I've not tested your code but I attempted using "transform: scale" before and, for me, it's not ideal because it also stretches the text within the slide (I use cards in my slides, not just images)

[angie6673]

hugoburguet, for me it works beacause I wanted my text became bigger but I think you can change that easily by adding a scale to your text div and a scale transform to the active text. Me, I make the text move. Maybe there is a easier way to do what you want but try that :)

[angie6673]

It's the first time I make an codepen, hope it will work :)
https://codepen.io/angie6673/pen/qEBqybj

[Webberjo]

This isn't quite what I was looking for. I want the amount of visible spacing between the slides to remain the same as the active slide resizes.

[angie6673]

OK, I don't know how to do that but maybe if you play with the 'gap' you'll finally have what you are looking for
Btw, I'm trying to include a nested slider in my slider to be abble to change the picture inside but I can't find the solution, if you have any idea about that 🤔

[xavortm]

Likely too late to help, but if someone else finds this;

I had 1:1 same problem. I solved it like this. Downside - I can't animate it nicely yet, though I am sure it's doable with careful calculation / timing of the events and animation duration. But it's janky.

/**
 * Handle move start - change widths and refresh layout
 * @param {object} slider - The Splide slider instance
 * @param {number} newIndex - Index of the new slide
 * @param {number} prevIndex - Index of the previous slide
 */
export const handleMoveStart = (slider, newIndex, prevIndex) => {
	const prevSlide = slider.Components.Slides.getAt(prevIndex);
	const newSlide = slider.Components.Slides.getAt(newIndex);

	// Reset previous slide width
	if (prevSlide) {
		prevSlide.slide.classList.remove('is-enlarged');
	}

	// Set new slide width
	if (newSlide) {
		newSlide.slide.classList.add('is-enlarged');
	}
};

/**
 * Enlarge the active slide
 * @param {object} slider - The Splide slider instance
 */
export const enlargeActiveSlide = (slider) => {
	const activeSlide = slider.Components.Slides.getAt(slider.index);

	if (activeSlide) {
		activeSlide.slide.classList.add('is-enlarged');
	}
};

/**
 * Setup event listeners for post-type carousels
 * @param {object} slider - The Splide slider instance
 * @param {string} type - Carousel type
 */
export const setupPostCarouselEvents = (slider, type) => {
	if (type === 'post') {
		slider.on('mounted', () => {
			enlargeActiveSlide(slider);
		});

		slider.on('move', (newIndex, prevIndex) => {
			handleMoveStart(slider, newIndex, prevIndex);
		});
	}
};

How my slider config looks like:

const baseConfig = {
		arrows: showArrows,
		autoHeight: true,
		autoWidth: true,
		autoplay: false,
		drag: false,
		easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
		gap: '2.5rem',
		pagination: paginationType === 'dots',
		perMove: 1,
		perPage: 1,
		rewind: false,
		padding: 0,
		focus: 'first',
		type: 'slide',
	};

And then in CSS

.with-enlarged {
	& .carousel-item {
		--carousel-item-width: 620px;
		margin-left: 0;
		width: var(--carousel-item-width, 100%);

		&.is-enlarged {
			--carousel-item-width: 840px;
		}
	}

	& .splide__list {
		align-items: flex-end;
	}
}