How to scale active element

[MariuszRogowicz]

When try to scale active element &__slide using transform property, some of carousel items will thrown away.
This is only because we are overriding the normal transform3d property that embela uses.

So how i can add scale, without breaks library work?
I try to use just simple scale property, but this does not solve my problem.
https://css-tricks.com/almanac/properties/s/scale/

[davidjerleke]

Hi @MariuszRogowicz,

You can use the approach in the scale example in the docs. It adds an additional element inside the slide element and scale that instead:

<div class="embla">
  <div class="embla__container">

    <div class="embla__slide">
      <div class="embla__slide__scale" <!-- scale this element -->>
        Slide content here
      </div>
    </div>

    ...more slides
  </div>
</div>

Note that if you have loop enabled, scaling slides can break the carousel unless you follow the scale example approach in the docs.

Best,
David