The Elementor Carousel is a widget that allows you to display multiple items in a visually appealing manner. One of the less-known but highly useful settings is the ability to offset slides. To offset Elementor carousel slides means you can have slides that are partially visible on either side of the main slides.
Tip: Offset slides can be particularly useful for product showcases or portfolio sections.
Prerequisites
Make sure you have the following installed and activated:
- Elementor (Pro)
Adding a Carousel
- Drag and Drop
Locate the Carousel widget and drag it into your desired section. - Clean Up
By default, the carousel comes with multiple items. Delete them until you have just one left. We will duplicate them later on.
Configuring Slides
- Add Container
Drag a container into the remaining slide. - Insert Image
Add an image to the container. Choose any image from your media library. - Duplicate
Once you’re satisfied with how the slide looks, duplicate it multiple times. For example, create seven duplicates.
Setting the Offset
- Navigate to Settings
Scroll down to the settings section of the Carousel widget. - Slides to Display
Set the number of full slides you want to display. For instance, if you want three full slides and two offset slides, set this to three. - Slide to Scroll
Usually, setting this to “1” works well. - Offset Setting
Here, you can choose to offset slides on both sides, just the left, or just the right.
Note: You will have to preview the design in order to see your changes.
Preview and Adjust
- Preview the Page
Click on the “Preview” button to see how the offset looks. - Adjust Width
If the offset size doesn’t suit you, go back to settings and adjust the width.
Offset Elementor Carousel Slides – Conclusion
Offsetting Elementor Carousel slides is a straightforward process but can add a layer of sophistication to your web design. Experiment with different settings to find what works best for you.
