Carousel Components

Two separate implementations for different use cases. Choose the one that fits your needs.

📄 Pagination Mode

Slide-by-slide navigation with full user control. Perfect for interactive browsing.

Best for:

  • Service offerings
  • Team profiles
  • Customer testimonials
  • Product features
  • Case studies
View Pagination Demo →

🔄 Continuous Scroll Mode

Infinite smooth scrolling without interruption. Ideal for ambient displays.

Best for:

  • Partner/sponsor logos
  • Certifications/awards
  • Recent projects
  • Stats/achievements
  • Social media feed
View Continuous Demo →

⚙️ Configuration Options

Pagination Speed

// In carousel-pagination.js const AUTO_SCROLL_DELAY = 4000; // ms // 3000 = faster // 4000 = default // 6000 = slower

Continuous Speed

// In carousel-continuous.js const CONTINUOUS_SCROLL_SPEED = 0.5; // 0.3 = very slow // 0.5 = default // 1.0 = fast // 2.0 = very fast

Responsive Cards

// Desktop: 3 cards // Tablet: 2 cards // Mobile: 1 card // Edit in CSS: // @media (max-width: 1024px)

User Interaction Pause

// In pagination.js const USER_INTERACTION_TIMEOUT = 8000; // Time to pause after // user clicks/swipes (ms)

📁 File Structure

components/ ├── carousel-pagination.html ← Demo: Pagination mode ├── carousel-continuous.html ← Demo: Continuous mode ├── carousel-index.html ← This page └── carousel-README.md ← Full documentation css/components/ ├── carousel-pagination.css ← Pagination styles └── carousel-continuous.css ← Continuous styles js/components/ ├── carousel-pagination.js ← Pagination logic (~250 lines) └── carousel-continuous.js ← Continuous logic (~150 lines)

🚀 Quick Start

For Pagination Mode:

<!-- In <head> --> <link rel="stylesheet" href="/css/components/carousel-pagination.css"> <!-- Copy HTML structure from carousel-pagination.html --> <!-- Before </body> --> <script src="/js/components/carousel-pagination.js"></script>

For Continuous Mode:

<!-- In <head> --> <link rel="stylesheet" href="/css/components/carousel-continuous.css"> <!-- Copy HTML structure from carousel-continuous.html --> <!-- Before </body> --> <script src="/js/components/carousel-continuous.js"></script>

Try both demos to see which works best for your project!

Pagination Demo Continuous Demo