An accessible, animated testimonial carousel built for UHealth and Miller School of Medicine's enterprise Sitecore platform.
Interactive quote slider with typewriter expansion effect, touch gestures, and keyboard navigation.
Every feature designed with accessibility, performance, and user experience in mind.
Engaging text reveal animation that draws readers into the full quote content, with smooth cursor blinking effect.
Full keyboard navigation, ARIA labels, screen reader support, and prefers-reduced-motion respect.
Native swipe navigation for mobile devices with intelligent auto-advance pause on interaction.
Smart carousel rotation with viewport detection and user interaction awareness.
Container smoothly adapts to content length during expansion with CSS cubic-bezier transitions.
Scoped CSS prevents conflicts with Sitecore's enterprise environment and other page components.
Performance-optimized vanilla JavaScript with zero dependencies.
Class-based JavaScript with modular event handling and state management.
class MedicalQuoteSlider { constructor() { this.quotes = [...]; // Quote data array this.currentSlide = 0; this.isExpanded = false; this.autoAdvanceInterval = 7000; this.init(); } init() { this.createSlides(); this.createNavigation(); this.bindEvents(); this.setupIntersectionObserver(); this.showSlide(0); } // Dynamic slide generation createSlides() { const wrapper = document.getElementById('sliderWrapper'); this.quotes.forEach((quote, index) => { const slide = document.createElement('div'); slide.className = 'slide'; slide.setAttribute('role', 'tabpanel'); // ... slide content generation }); } }