Q: Scale active slide

[anstapol]

Hey guys, first of all thanks for the amazing library, it's really simple and awesome. However I'm struggling when trying to achieve next effect:

Effect description:

• All slides besides the active one have same width.
• Active one visually should be as if it were scaled to 125%.
• Active slide ideally should cover un-active one next to it.

I've obviously tried all css variations but no luck. One example:

    .keen-slider {
        overflow-x: hidden !important;
        overflow-y: visible !important;
    }

    .keen-slider__slide {
        transform-origin: left center;
        overflow: visible !important;
        z-index: 0;
    }

    .keen-slider__slide.active {
        z-index: 10;
    }

    .keen-slider__slide.active img {
        transform: scale(1.25);
    }

As you may know specifying two axis overflows doesn't work very well in css

But a scrollbar appears and only overflow: visible !important fixes the issue with a drawback of showing all the slides horizontally which is not ideal:

So I was thinking maybe a custom plugin would help here? Would appreciate any suggestions, Cheers.

[anstapol]

If anyone faces same difficulties I ended up adding vertical padding to the parent, making all overflows visible and adding an additional wrapper with overflow-x: hidden.