Overview

The Zozo Event Slider widget displays your events in a fully responsive, interactive carousel using Elementor. It allows visitors to browse upcoming or featured events with smooth sliding animations, navigation controls, autoplay, and responsive layouts.

The widget includes powerful query filters, flexible slider options, and extensive styling controls, making it ideal for homepages, featured event sections, conferences, webinars, festivals, and promotional landing pages.

---

General Settings

Overview

The General section contains basic widget configuration options.

---

Extra Class

Add one or more custom CSS classes to the widget.

This allows developers to apply custom styling without modifying the plugin.

Example

featured-slider
homepage-events
conference-slider

Multiple classes can be separated with spaces.

---

Query Settings

Overview

The Query section determines which events are displayed inside the slider.

You can build highly customized sliders using multiple filtering options.

---

Events Per Page

Specify how many events should be loaded into the slider.

Example:

10

---

Excerpt Length

Specify the number of words displayed in each event summary.

Short excerpts create compact slides, while longer excerpts provide additional event information.

---

Start Date

Display only events that begin on or after the selected date.

Useful for:

• Upcoming Events
• Monthly Events
• Seasonal Campaigns
• Conferences

---

End Date

Display only events that occur before the selected end date.

Useful for displaying events within a specific period.

---

Organizer Filter

Display events from one or more selected organizers.

Multiple organizers can be selected.

---

Exclude Organizer

Hide events created by selected organizers.

---

Location Filter

Display events from selected locations.

Examples include:

• New York
• London
• Online
• Main Hall

---

Exclude Location

Exclude events from selected locations.

---

Category Filter

Display only events from selected categories.

Examples:

• Conference
• Webinar
• Workshop
• Meetup

---

Exclude Categories

Hide events belonging to selected categories.

---

Tag Filter

Display events assigned to selected tags.

Examples:

• Business
• Marketing
• Technology
• Education

---

Exclude Tags

Hide events assigned to selected tags.

---

Label Filter

Display events using selected labels.

Examples:

• Featured
• Popular
• Free
• Premium

---

Exclude Labels

Hide events using selected labels.

---

Include Events

Display only selected events.

Ideal for:

• Featured Events
• Homepage Sliders
• Promotional Campaigns

---

Exclude Events

Hide selected events without deleting them.

---

Order By

Choose how events are sorted.

Available options typically include:

• Event Date
• Event ID
• Title
• Publish Date
• Menu Order
• Random

---

Show Past Events

Choose whether completed events should appear in the slider.

Options

• Yes
• No

Default: No

---

Order

Select the sorting direction.

Options

• Ascending
• Descending

---

Slider Settings

Overview

The Slider Settings section controls how the event carousel behaves.

These settings allow you to create smooth and engaging event sliders for any page.

---

Slides to Show

Choose how many event slides are displayed at the same time.

Examples:

• 1 Slide
• 2 Slides
• 3 Slides
• 4 Slides

Responsive settings automatically adjust the number of slides for tablets and mobile devices.

---

Slides to Scroll

Specify how many slides move during each navigation action.

Smaller values create smoother transitions, while larger values move through events more quickly.

---

Autoplay

Enable automatic slide transitions.

When enabled, the slider rotates through events without requiring user interaction.

Ideal for:

• Homepages
• Hero Sections
• Featured Events

---

Autoplay Speed

Specify the delay between automatic slide transitions.

Lower values create faster animations, while higher values allow visitors more time to read each event.

---

Infinite Loop

Enable continuous looping.

When enabled, visitors can browse events endlessly without reaching the final slide.

---

Transition Speed

Control how quickly the slider animation plays.

A balanced transition speed creates a smooth browsing experience.

---

Pause on Hover

Pause autoplay whenever visitors place the mouse over the slider.

This allows visitors to read event information without the slides changing automatically.

---

Navigation Settings

Overview

Navigation controls help visitors manually browse through events.

---

Navigation Arrows

Display previous and next arrow buttons.

Visitors can navigate through events one slide at a time.

---

Arrow Icons

Choose custom icons for:

• Previous
• Next

Examples include:

• Chevron
• Angle
• Arrow
• Circle Arrow

---

Pagination

Display pagination indicators beneath the slider.

Pagination helps visitors understand their position within the slider.

---

Pagination Style

Depending on the selected layout, pagination may appear as:

• Dots
• Numbers
• Progress Indicators

---

Responsive Settings

Overview

The slider automatically adapts to different screen sizes.

You can configure separate layouts for:

• Desktop
• Tablet
• Mobile

This ensures the slider remains easy to use on all devices.

---

Event Content Settings

Overview

Choose which event information appears inside each slide.

Available display elements include:

• Featured Image
• Event Title
• Event Date
• Time
• Location
• Organizer
• Categories
• Labels
• Event Excerpt
• Read More Button

You can enable, disable, or reorder these elements to match your design.

---

Notes

• The Event Slider widget displays only Event Builder events.
• Multiple query filters can be combined to create advanced event sliders.
• Empty filters are ignored automatically.
• The widget is powered by Swiper.js, providing smooth touch support and responsive performance.
• Navigation arrows and pagination can be enabled independently.
• Fully responsive across desktop, tablet, and mobile devices.
• Additional styling options for typography, spacing, colors, navigation, pagination, and slide appearance are available under the Style tab in Elementor.