Wow Team Carousel Doc

The Team Carousel module allows you to showcase team members in a responsive carousel layout. It is ideal for displaying staff profiles, contributors, or company teams with photos, roles, and social links.

Content

The Content tab is where you add team members and configure how the carousel behaves across different devices.

Add New Item

This option allows you to add individual team members to the carousel.

Carousel Item → Content

This toggle contains the core profile information displayed for each team member.

1. Photo – Upload or select the team member’s profile image.
2. Photo Alt Text – Adds alternative text for accessibility and SEO.
3. Member Name – Displays the team member’s name.
4. Job Title – Shows the role or position of the team member.
5. Member Bio – Displays a short biography or description.

Carousel Item → Social Links

This toggle allows you to add social and contact links for each team member.

1. Website URL – Links to a personal or company website.
2. Email Address – Adds a clickable email link.
3. Facebook URL – Displays a Facebook profile link.
4. Twitter URL – Displays a Twitter (X) profile link.
5. Instagram URL – Displays an Instagram profile link.
6. LinkedIn URL – Displays a LinkedIn profile link.
7. GitHub URL – Displays a GitHub profile link.
8. Behance URL – Displays a Behance portfolio link.
9. Dribbble URL – Displays a Dribbble portfolio link.
10. Phone – Displays a clickable phone number.

Carousel Item → Tab Content

This toggle controls the content used when the tab feature is enabled.

1. Title – Sets the tab title text.
2. Subtitle – Adds supporting text within the tab.
3. Thumbnail – Displays an image inside the tab.
4. Add Image – Uploads or selects an image for the tab.

Carousel Settings

This toggle controls the global behavior and interaction of the carousel.

Carousel Settings → General Tab

These options define animation, layout, and responsiveness.

1. Animation Speed – Controls slide transition speed.
2. Autoplay – Automatically rotates team member slides.
3. Autoplay Speed – Sets the delay between autoplay transitions.
4. Navigation & Pagination – Displays navigation arrows, pagination dots, both, or none.
5. Use Fixed Width Slide – Maintains consistent slide width.
6. Slides To Show – Determines the number of visible items per device.
7. Slide Spacing – Adjusts spacing between items.
8. Apply Spacing on First & Last Items – Adds spacing to edge slides.
9. Infinite Looping – Enables continuous looping.

Carousel Settings → Advanced Tab

These options provide advanced control over interaction and performance.

1. Sliding Direction – Controls slide direction, including RTL compatibility.
2. Sliding CSS Transition – Defines the easing effect for animations.
3. Lazy Loading – Loads content only when required.
4. Lazy Loading Type – Choose between Progressive or On-demand loading.
5. Auto Height – Adjusts carousel height automatically.
6. Swipe – Enables touch swipe navigation.
7. Pause on Hover – Pauses autoplay on hover.
8. Items to Scroll – Sets how many items move per scroll.
9. Vertical Mode – Displays slides vertically.
10. Center Mode – Highlights the center item.
11. Wait For Animate – Prevents overlapping animations.
12. Use Custom Cursor – Enables a custom cursor effect.
13. Wrapper Spacing Top – Adds spacing above the carousel.
14. Wrapper Spacing Bottom – Adds spacing below the carousel.
15. Open Image in Lightbox – Opens images in a lightbox view.
16. Equalize Item Height – Ensures all items have equal height.

Tab Settings

This toggle enables and manages tab-based navigation.

1. Use Tab – Enables the tab layout.
2. Hide Tab on Mobile – Hides tabs on smaller devices.
3. Select Tab Elements – Choose which elements appear in tabs.
4. Tab Items – Manage individual tab entries.
5. Item Spacing – Controls spacing between tab items.

Design

The Design tab allows you to control the visual styling of the Team Carousel module.

Navigation

The Navigation toggle allows you to customize the arrows used to navigate through the carousel. You can adjust their size, color, background, position, and spacing. Hover and active states can also be styled to match your website’s design.

Pagination

The Pagination toggle controls the appearance of the pagination dots that indicate the current slide. You can style their size, color, spacing, and alignment, as well as customize hover and active states to ensure they are visually consistent with your layout.

Tab Style

The Tab Style toggle manages the overall look of the tab navigation for the carousel. You can customize the background, borders, spacing, and alignment of the tabs, and style active and inactive states to create a cohesive and user-friendly tab interface.

Tab Elements

This toggle allows you to style individual elements within each tab. You can adjust the typography, colors, and alignment of titles, subtitles, and thumbnails, and control spacing to maintain a clean and organized layout.

Text

The Text toggle provides full control over the typography of all text elements in the carousel, including team member names, job titles, and bios. You can customize font family, size, weight, line height, letter spacing, and color to match your site’s visual style.

Sizing

The Sizing toggle allows you to adjust the dimensions of carousel items. You can control the width, height, and scaling of images and text, as well as responsive sizing options to ensure the carousel displays properly across devices.

Spacing

The Spacing toggle controls the internal and external spacing of carousel items. You can set padding and margin values, adjust the spacing between items, and fine-tune the layout to create a balanced and visually appealing design.

Box Shadow

The Box Shadow toggle enables you to add shadow effects to carousel items. You can adjust the color, blur, spread, and position of the shadows, and create hover shadow effects to enhance depth and visual separation between items.

Filters

The Filters toggle allows you to apply visual filter effects to images and carousel items. You can adjust properties such as brightness, contrast, saturation, and blur, and create hover effects to add dynamic visual styling.

Transform

The Transform toggle enables you to apply transformations to carousel items. You can scale, rotate, translate, and skew items, and add hover or animation-based transforms to create movement and interactive effects.

Animation

The Animation toggle allows you to control entrance and hover animations for carousel elements. You can choose animation types, duration, delay, and easing to create smooth, engaging visual effects as items appear or interact with users.