A carousel reads better when one slide clearly has the spotlight and the ones beside it just peek in.
Center Mode in the Carousel Anything widget from The Plus Addons for Elementor keeps the active slide in the middle. With the Scale effect it is shown larger than the slides on either side.
To check the complete feature overview documentation of The Plus Addons for Elementor Carousel Anything widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Center Mode needs The Plus Addons for Elementor Pro. The Carousel Anything widget itself is free.
- Widget to enable: Carousel Anything, switched on under The Plus Addons > Widgets.
- Slides: one saved Elementor template per slide, created under Templates > Saved Templates and published.
Step 1: Turn On Center Mode
- Select the Carousel Anything widget and open Style > Carousel Options.
- In the Desktop tab, set Desktop Columns to an odd number, such as Column 3, so there is a slide on each side of the centre.
- Turn on Center Mode and set Center Padding. This is the space, in pixels, on the left and right of the carousel where the neighbouring slides peek in.
Step 2: Pick an Effect
- Choose Center Slide Effects: none, Scale or Shadow.
- For Scale, set Center Slide Scale (default 1) and Normal Slide Scale (default 0.8).
- Set Normal Slide Opacity (default 0.7) to fade the side slides.
Publish the page to see the result.
Settings
| Setting | What it does | Default |
|---|---|---|
| Center Padding | Space on the left and right of the carousel for the neighbouring slides (0-500 px). | 0 |
| Center Slide Effects | none, Scale or Shadow. | none |
| Center Slide Scale | Size of the centre slide with Scale (0.3-2). | 1 |
| Normal Slide Scale | Size of the other slides with Scale (0.3-2). | 0.8 |
| Normal Slide Opacity | Opacity of the other slides when an effect is chosen (0.1-1). | 0.7 |
How It Behaves
- In our test with Column 3, Center Padding 60 and Scale, the middle slide was full size and opaque, and the slides on both sides were shown at 80% size and 70% opacity.
- Moving the carousel makes the next slide the new centre.
- With none, the slides keep their size and opacity; only the padding changes.
- With Column 1 and a large padding (150), one wide slide sits in the middle and the neighbours peek in at both edges.
- Center Mode and Center Padding can be set again for tablets and phones in the Tablet and Mobile tabs, after turning on Responsive Tablet or Responsive Mobile.
Limitations
- Shadow fades the centre slide too. In our test the centre slide got the shadow, but it was shown at the same 70% opacity as the other slides. Set Normal Slide Opacity to 1 if the centre slide should stay fully visible.
- Center Mode is not part of the free plugin. The switch in the free widget only shows an upgrade notice.
Troubleshooting
The centre slide is not bigger
Set Center Slide Effects to Scale and give Normal Slide Scale a value below 1. With none, no slide is resized.
No neighbouring slides are visible
Increase Center Padding, or use more than one column.
