VN Services Slider

What It Does

Displays your company services in cards with clickable navigation buttons that switch between different service details and images.

When to Use It

• Services overview pages to showcase multiple offerings
• Homepage sections highlighting your main service areas
• Product comparison sections where users can explore options
• Feature showcases where each feature needs its own detailed view

How to Add This Module

1. In the page builder, find "VN Services Slider" in the module list
2. Drag it to where you want it on the page
3. Click on it to open the settings panel

Settings Explained

Content Tab

Services

A repeater where you add each service (minimum 2, maximum 10, starts with 3).

Setting	What It Does	Options
Navigation Label	Text shown on the clickable tab button	Short text (e.g., "Web Design")
Service Content	Expandable section with the service details	See Service Content breakdown below
Service Image	Image displayed alongside the service content	Upload or select from file manager
Card Background	Background color/style for this service card	White, Light Gray, Dark, Gradient

Service Content (inside each service)

Setting	What It Does	Options
Show/Hide Elements	Toggle which content elements appear	Icon Heading, Heading, Body, Toggles, Button
Icon Heading	Small heading with icon above main heading	Text + icon selection
Main Heading	Large heading for the service (e.g., "Web Design Services")	Text, level (H2-H6), color
Body Content	Rich text describing the service	Rich text editor
Button	Call-to-action button (e.g., "Learn More")	Button text, link, style, size

Slider Settings

Setting	What It Does	Options
Slider Max Width	Maximum width of the entire slider area	Small (800px), Medium (1000px), Large (1200px), Extra Large (1400px), Full Width

Slider Options

Setting	What It Does	Options
Transition Speed	How fast slides animate when switching	100ms to 3000ms (default: 600ms)
Autoplay	Automatically cycle through services	On/Off (default: Off)
Autoplay Speed	Time between auto-switching (when Autoplay is On)	1 to 30 seconds (default: 5 seconds)
Loop Slides	Return to first service after the last	On/Off (default: On)
Show Navigation Arrows	Display previous/next arrow controls	On/Off (default: On)
Show Dot Indicators	Display dot pagination below slider	On/Off (default: Off)

Advanced Customization

For developers only - add custom CSS classes or IDs.

Example Setups

Example 1: Main Services Page

1. Add 3-4 services
2. For each service:
   • Navigation Label: "Web Design", "Development", "Marketing", "Support"
   • Heading: "Web Design Services"
   • Body Content: 2-3 paragraphs explaining the service
   • Button: "View Our Work" linking to portfolio
   • Service Image: High-quality image representing the service
   • Card Background: White
3. In Slider Settings:
   • Slider Max Width: Large (1200px)
   • Autoplay: Off (let users explore at their pace)
   • Show Navigation Arrows: On

Example 2: Homepage Services Preview

1. Add your top 3 services
2. For each service:
   • Keep descriptions shorter (1 paragraph)
   • Button: "Learn More" linking to full service page
3. In Slider Settings:
   • Slider Max Width: Medium (1000px)
   • Autoplay: On
   • Autoplay Speed: 6 seconds

Example 3: Product Features Showcase

1. Add 4-5 feature cards
2. For each feature:
   • Navigation Label: Short feature name
   • Show Icon Heading: On (with relevant icon)
   • Body Content: Feature benefits
   • Show Button: Off (no CTA needed)
   • Service Image: Screenshot or illustration

Tips

• Keep Navigation Labels short (1-2 words) so all tabs fit nicely
• Use consistent image dimensions across all services for a polished look
• The first service shows by default, so put your most important offering first
• Turn off Autoplay if your services need time to read
• Use contrasting Card Backgrounds if services have different themes
• Include a button on each service to guide visitors to learn more