Testimonial, Quote slider

Ideal For

• Customer testimonials
• Client reviews & feedback
• User ratings & social proof
• Expert endorsements
• Team & employee quotes
• Case study highlights
• Inspirational & motivational quotes

Feature Highlights

Content

• Unlimited testimonials via repeatable fields
• Per-testimonial: text, author name, role/company, avatar photo, star rating (1–5)

Transitions & Animation

• 4 smooth CSS effects: Fade, Slide Up, Slide, Zoom
• Configurable transition speed (100–2000ms) and slide delay (1–20s)
• Auto-play with pause on hover
• Random order option
• Respects prefers-reduced-motion for accessibility

Star Rating

• 1–5 star rating per testimonial
• Customisable star colour and size
• Unfilled stars shown as outlines for visual clarity

Google Schema / SEO

• JSON-LD structured data injected in
• Individual Review markup per testimonial
• Automatic AggregateRating calculation across all rated testimonials
• Supports LocalBusiness, Organisation, Product, and Service schema types
• Helps achieve Google rich result snippets with star ratings in search

Quote Styles

• 5 decorative options: None, Border Left, Border Right, Mark Left, Mark Both
• Customisable quote mark colour and size
• First letter styling with custom size and colour

Author & Avatar

• Author name and role/company
• Circular avatar photo with configurable size (24–80px)
• 3 author block positions: Left, Centre, Right
• Individual colour and font size controls

Navigation

• Prev/next arrows - appear on hover, hidden by default for clean look
• Dot indicators with active state
• Customisable arrow size, dot colour, and active dot colour
• Click any dot to jump to that slide

Themes

• None: transparent, inherits from your template
• Boxed: background colour with padding
• Card: background, border, border radius, and optional shadow

Styling

• Minimum height control (or auto-sizing to tallest slide)
• Testimonial text size and colour
• Author name size and colour
• Role text size and colour
• Read more link with position (left/centre/right), colour, and hover colour
• Custom CSS field with CodeMirror syntax highlighting

Performance

• Vanilla JavaScript - zero jQuery dependency
• ~1.4 KB JS + ~5.6 KB CSS (minified)
• No external libraries or CDN dependencies
• Joomla WebAssetManager for proper asset loading
• CSS custom properties for efficient inline overrides

Developer Friendly

• Multiple module instances on the same page
• CSS custom properties for template override
• Custom CSS field per module instance
• Override-friendly template
• Clean, semantic HTML with BEM-like class naming

Accessibility

• ARIA labels on all interactive elements
• prefers-reduced-motion disables animations automatically
• Keyboard-navigable buttons
• Auto-play pauses when browser tab is hidden

Compatibility

• All Joomla
• All modern browsers (Chrome, Firefox, Safari, Edge)
• Responsive - adapts to container width
• Works with any Joomla template