css for middle item in a carousel

Hello,

Can anyone explain how i could change the css for the middle item that's displayed on screen in a carousel ?

For example i have 10 items but only 3 show on screen but i want to make the middle item bigger, but when i press next to view the other items i still want the middle item in view to be bigger. 

Can you share link to carousel on your site?

Try using CSS, target with :active + slide item class

@Royster1994

@tuanphan I'm trying to do this on this website too: https://www.thebrandmethod.com/website-in-a-week to the 'this could be your website' part. I'd like the active slide (middle slide) to be larger than the two next to it.

Do you also know how you can make the middle slide centered on loading?

In this case, because of the way that squarespace clips things, we need to make all the non-active ones slightly smaller. same effect, just safer with layout. I've transformed all slides to 90% of original size and forced the active one back to 100%. then added a transition to make it ease in and out.

Put this in your custom css. i've used the block id to make it just for that section, but you could remove that and it would apply to all carousels.

div#block-yui_3_17_2_1_1628511352168_11887 .sqs-gallery-design-strip-slide {
    transform: scale(0.9);
    transition: ease 0.5s;
}

div#block-yui_3_17_2_1_1628511352168_11887 .sqs-active-slide {
    transform: scale(1) !important;
}

To have the active slide centered, you don't need CSS. when edit the design of the carousel you can pick "Centered" for the property "Active Alignment" and that should sort that bit