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 🤔