Agent Slider

The Agent Slider widget in Zozonest is an Elementor-powered carousel tool that allows you to showcase multiple real estate agents in a rotating, space-saving format. It is ideal for homepages or “Meet the Team” sections where you want to highlight several agents without cluttering the page.

1. Content & Query Settings

These settings determine which agents appear in the slider and how they are selected:

• Number of Agents: Set the total count of agent profiles to include in the carousel.

• Agent Selection: Choose to display “Recent Agents,” “Random Agents,” or manually pick specific agents by their IDs.

• Filter by Agency/Category: Narrow down the slider to show only agents from a specific real estate firm or specialized department (e.g., “Sales Team” or “Rental Experts”).

• Order By: Sort the agents alphabetically, by the date they joined, or by their “Menu Order” rank.

2. Slider Animation & Behavior

Manage the movement and interactivity of the carousel:

• Autoplay & Speed: Enable the slider to move automatically and set the interval (in milliseconds) between transitions.

• Infinite Loop: When the user reaches the last agent, the slider automatically circles back to the first one without stopping.

• Pause on Hover: If a user hovers their mouse over an agent’s card to read their details, the slider will stop rotating.

• Animation Effect: Choose between a standard “Slide” (horizontal movement) or a “Fade” transition.

3. Navigation & Pagination

Customize how users interact with the slider:

• Navigation Arrows: Enable or disable “Prev/Next” arrows. You can usually customize the arrow icons, their size, and their position (sides or bottom).

• Pagination Dots: Enable small dots at the bottom of the slider to indicate the number of agents and which one is currently in view.

• Slides per View: Define how many agent cards are visible at once (e.g., 1 on mobile, 3 on tablet, 4 on desktop).

4. Layout & Styling

Fine-tune the visual appearance of the agent cards within the slider:

• Skin/Version: Select from various design layouts (e.g., Image on top, Text overlay, or Minimalist) to match your site’s theme.

• Image Styling: Adjust the border-radius for the agent’s headshot (e.g., making it perfectly circular) and set image sizes for faster loading.

• Typography & Colors: Use Elementor’s style tab to change the font, size, and color of the agent’s name, title, and social media icons.

• Item Spacing (Gutter): Adjust the horizontal gap between the individual agent cards in the carousel.