Is it possible that the active slide with keen-slider to be bigger than the others?

2.1k Views Asked by At

Im using library keen-slider, all the slides have the same size but the active. I want that all the slides to have the same size but the active one, which always must be a bit bigger than the rest.

I already tried this using slider.update:

slider.update(() => content.map(
    (_, index) => {
      if (index === cardInView) {
        return {
          size: 0.4,
          spacing: 0.05,
        }
      } 
      return {
        size: 0.2,
        spacing: 0.05,
      }
    }
  ),
defaultAnimation: {
  duration: 2000,
}, idx)

It kind of worked but it lost the animation. Anyone know how could i achieve this?

1

There are 1 best solutions below

0
Salmonella mayonnaise On

I couldn't make it work using the options in keen-slider. What ended up working for me is scaling down all inactive Cards in the Card's css styles (so the active Cards appears bigger).