Active center slide?

[uxmediahouse]

Hi, I want to create an effect where the center slide grows to a larger size than the other visible slides. This effect requires an “active” center slide. Is that possible in Pro?

my current code os here, but I need to target an active center slide: (the relative class names are added)

/* base state for every slide card */
.what-people-say-slider .x-slide .slide-card {
  transform: scale(.88);
  opacity: .7;
  transition: transform .45s ease, opacity .45s ease;
  transform-origin: center center;
}

/* active / centered slide */
.what-people-say-slider .x-slide.is-active .slide-card,
.what-people-say-slider .x-slide[aria-current="true"] .slide-card,
.what-people-say-slider .x-slide[data-active="true"] .slide-card {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
}

[ruenel]

Hello Riceman,

Thanks for writing in!

In your Slider Container element settings, you may need to align it to the center:

And it should be “Scrolled By” set to “Slide”:

And in your code, you must update “is-active” to change to “is-current-slide”.

Kindly let us know how it goes.