Demo 1: Basic Testimonials Carousel

Showcase customer reviews with auto-rotation and star ratings.

The kitchen remodel exceeded our expectations. The team was professional, on time, and the quality of work is outstanding. Highly recommend!

Sarah Johnson

Homeowner, Mission Valley

5

Our bathroom renovation was completed ahead of schedule and under budget. The attention to detail was impressive. We couldn't be happier!

Michael Chen

Property Owner, La Jolla

5

From the initial consultation to final walkthrough, the process was smooth and stress-free. The quality of craftsmanship is evident in every detail.

Lisa Rodriguez

Homeowner, Pacific Beach

5

<div data-tradecalcs-testimonials data-autoplay="true" data-interval="5000">
  <div data-testimonial>
    <div data-testimonial-content>The kitchen remodel exceeded our expectations...</div>
    <div data-testimonial-author>Sarah Johnson</div>
    <div data-testimonial-role>Homeowner, Mission Valley</div>
    <div data-testimonial-rating>5</div>
  </div>
  <!-- More testimonials... -->
</div>

Interaction: Carousel auto-rotates every 5 seconds. Hover to pause. Use arrow buttons or dots to navigate.

Demo 2: Manual Navigation Only

Disable auto-rotation to let users control the pace.

The ADU construction process was seamless. Great communication throughout, and the final product is exactly what we envisioned.

David Park

Homeowner, North Park

5

Our deck renovation looks amazing! The team worked efficiently and cleaned up perfectly every day. Very professional service.

Jennifer Miller

Property Owner, Del Mar

5

Excellent craftsmanship on our home addition. The project manager kept us informed at every stage. Would definitely hire again.

Robert Taylor

Homeowner, Encinitas

4

<div data-tradecalcs-testimonials data-autoplay="false">
  <!-- Testimonials... -->
</div>

Demo 3: Mixed Star Ratings

Show authentic reviews with varying ratings.

Outstanding work on our flooring project. The installers were meticulous and the results are beautiful. Worth every penny!

Amanda White

Homeowner, Carlsbad

5

Great quality work. The only minor issue was a slight delay in materials, but the team handled it professionally and kept us informed.

James Anderson

Property Owner, Coronado

4

The roofing job was completed efficiently. Good communication and fair pricing. Would recommend for roofing needs.

Karen Martinez

Homeowner, Chula Vista

4

Demo 4: Custom Brand Colors

Customize colors using CSS variables to match your brand.

Transformed our backyard into an outdoor oasis. The landscaping and patio work is stunning. Highly skilled team!

Eric Thompson

Homeowner, Rancho Bernardo

5

The home remodeling project was handled with care and precision. Love the final result and how smooth the process was.

Nicole Brown

Property Owner, Scripps Ranch

5

<div data-tradecalcs-testimonials
     data-autoplay="true"
     style="--tc-testimonials-bg: #f0fdf4;
            --tc-testimonials-border: #86efac;
            --tc-testimonials-btn-bg: #10b981;
            --tc-testimonials-btn-hover: #059669;
            --tc-testimonials-dot-active: #10b981;">
  <!-- Testimonials... -->
</div>

Configuration Options

Data Attributes

data-tradecalcs-testimonials (required) — Main container
data-autoplay (optional) — Enable auto-rotation ("true"/"false", default: "true")
data-interval (optional) — Auto-rotation interval in milliseconds (default: 5000)
data-testimonial (required) — Individual testimonial container
data-testimonial-content (required) — Testimonial quote text
data-testimonial-author (required) — Customer name
data-testimonial-role (optional) — Customer title or location
data-testimonial-rating (optional) — Star rating 1-5 (default: 5)

CSS Custom Properties

--tc-testimonials-bg — Testimonial card background
--tc-testimonials-border — Card border color
--tc-testimonials-content-text — Quote text color
--tc-testimonials-author-text — Author name color
--tc-testimonials-role-text — Role/location color
--tc-testimonials-star-filled — Filled star color
--tc-testimonials-star-empty — Empty star color
--tc-testimonials-btn-bg — Navigation button background
--tc-testimonials-btn-hover — Button hover color
--tc-testimonials-btn-text — Button icon color
--tc-testimonials-dot-bg — Pagination dot background
--tc-testimonials-dot-active — Active dot color
--tc-testimonials-padding — Card padding
--tc-testimonials-gap — Spacing between elements
--tc-testimonials-radius — Border radius

JavaScript API

// Initialize all carousels manually
TradeCalcsTestimonials.init();

// Initialize specific carousel
const element = document.querySelector('[data-tradecalcs-testimonials]');
TradeCalcsTestimonials.initElement(element);

// Control specific carousel
const carouselId = element.id; // Auto-generated ID

// Go to next slide
TradeCalcsTestimonials.next(carouselId);

// Go to previous slide
TradeCalcsTestimonials.prev(carouselId);

// Go to specific slide (0-indexed)
TradeCalcsTestimonials.goTo(carouselId, 2);

// Start autoplay
TradeCalcsTestimonials.startAutoplay(carouselId);

// Stop autoplay
TradeCalcsTestimonials.stopAutoplay(carouselId);

// Listen for slide change
element.addEventListener('tc-testimonials-slide-change', function(e) {
  console.log('Slide changed:', e.detail);
  // { carouselId: "tc-testimonials-1", currentIndex: 2, totalSlides: 5 }
});

Keyboard Controls

The carousel is fully keyboard accessible:

Tab — Focus on navigation buttons or pagination dots
Arrow Left — Previous testimonial (when button focused)
Arrow Right — Next testimonial (when button focused)
Enter / Space — Activate focused button or dot

Features

✅ Pure vanilla JavaScript — no dependencies
✅ Lightweight — ~3KB total (JS + CSS)
✅ Auto-initialization — works immediately after loading
✅ Auto-rotation with pause on hover
✅ Manual navigation with prev/next buttons
✅ Pagination dots for direct slide access
✅ Star rating display (1-5 stars)
✅ Mobile responsive — stacks and scales beautifully
✅ Accessible — ARIA labels for screen readers
✅ Keyboard navigation — fully keyboard accessible
✅ Dark mode support — respects prefers-color-scheme
✅ Reduced motion support — respects prefers-reduced-motion
✅ Customizable — CSS variables for easy theming
✅ Multiple instances — unlimited carousels per page
✅ Event system — listen for slide changes
✅ Self-hosted — own it forever, no recurring fees

Use Cases

Contractor Websites — Showcase satisfied client reviews for kitchen, bathroom, roofing, etc.
Service Businesses — Build trust with customer testimonials for plumbing, HVAC, landscaping
Home Builders — Display homeowner reviews for custom homes, ADUs, additions
E-commerce Sites — Product reviews and customer satisfaction stories
Consulting Firms — Client success stories and project testimonials
SaaS Products — User reviews and case study highlights
Healthcare Providers — Patient testimonials (with appropriate consent)
Real Estate Agents — Client reviews for buying/selling experiences

Best Practices

Use real testimonials — Authentic reviews build genuine trust
Get permission — Always get consent before publishing customer names/reviews
Keep it concise — 1-3 sentences per testimonial for best readability
Mix ratings — All 5-star reviews can look fake; include some 4-star reviews
Include details — Specific projects, locations, or outcomes are more convincing
Update regularly — Fresh testimonials show active business
3-5 testimonials minimum — Too few looks sparse, too many dilutes impact
Match your brand — Customize colors to fit your website design
Mobile matters — Most visitors are on mobile, test there first

Browser Support

Works in all modern browsers:

✅ Chrome/Edge (Chromium) — Full support
✅ Safari — Full support
✅ Firefox — Full support
✅ Mobile Safari (iOS) — Full support with touch
✅ Chrome Mobile (Android) — Full support with touch

Testimonials Carousel Widget Demo