Add Carousel plugin with ordering and icon fixes

Adds @cloudimage/carousel (v2.0.0) to the plugins hub with data model,
SVG illustration, icon sprite, hero count update, and footer link.
Fixes: logical plugin ordering, carousel icon (arrows instead of
checkmark), redundant "zero dependencies" in description, and
footer link order to match the plugins array.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: 2 people

app.js

@@ -131,6 +131,31 @@ const PLUGINS = [
       repo: 'https://github.com/scaleflex/cloudimage-before-after',
     },
   },
+  {
+    id: 'cloudimage-carousel',
+    name: 'Carousel',
+    npmPackage: '@cloudimage/carousel',
+    version: '2.0.0',
+    tagline: 'Responsive image carousel & gallery',
+    description:
+      'A lightweight carousel with touch swipe, zoom, autoplay, thumbnails, fullscreen, and React support.',
+    icon: 'icon-carousel',
+    accentColor: '#f59e0b',
+    features: [
+      'Touch & Swipe',
+      'Zoom',
+      'Autoplay',
+      'Thumbnails',
+      'Fullscreen',
+      'Responsive',
+      'React Support',
+      'Accessibility',
+    ],
+    links: {
+      demo: 'https://scaleflex.github.io/cloudimage-carousel/',
+      repo: 'https://github.com/scaleflex/cloudimage-carousel',
+    },
+  },
 ];
 
 /* --------------------------------------------------------------------------
@@ -294,6 +319,35 @@ function getPluginIllustration(pluginId) {
         </circle>
         <defs><linearGradient id="grad-ba" x1="0" y1="0" x2="200" y2="160"><stop stop-color="#2c99ff"/><stop offset="1" stop-color="#00d4aa"/></linearGradient></defs>
       </svg>`,
+
+    'cloudimage-carousel': `
+      <svg viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Image carousel illustration">
+        <!-- Center slide -->
+        <rect x="50" y="20" width="100" height="120" rx="8" stroke="url(#grad-carousel)" stroke-width="2" opacity="0.5" fill="url(#grad-carousel)" fill-opacity="0.06"/>
+        <!-- Left slide (behind) -->
+        <rect x="15" y="30" width="50" height="100" rx="6" stroke="url(#grad-carousel)" stroke-width="1.5" opacity="0.2" fill="url(#grad-carousel)" fill-opacity="0.03"/>
+        <!-- Right slide (behind) -->
+        <rect x="135" y="30" width="50" height="100" rx="6" stroke="url(#grad-carousel)" stroke-width="1.5" opacity="0.2" fill="url(#grad-carousel)" fill-opacity="0.03"/>
+        <!-- Image placeholder on center slide -->
+        <path d="M60 110 L80 85 L95 100 L115 75 L140 110 Z" fill="url(#grad-carousel)" opacity="0.12"/>
+        <circle cx="80" cy="50" r="8" fill="url(#grad-carousel)" opacity="0.1"/>
+        <!-- Left arrow -->
+        <path d="M30 80 L22 80" stroke="url(#grad-carousel)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
+        <path d="M26 76 L22 80 L26 84" stroke="url(#grad-carousel)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
+        <!-- Right arrow -->
+        <path d="M170 80 L178 80" stroke="url(#grad-carousel)" stroke-width="2" stroke-linecap="round" opacity="0.5"/>
+        <path d="M174 76 L178 80 L174 84" stroke="url(#grad-carousel)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" opacity="0.5"/>
+        <!-- Dot indicators -->
+        <circle cx="88" cy="148" r="3" fill="url(#grad-carousel)" opacity="0.2"/>
+        <circle cx="100" cy="148" r="3.5" fill="url(#grad-carousel)" opacity="0.6"/>
+        <circle cx="112" cy="148" r="3" fill="url(#grad-carousel)" opacity="0.2"/>
+        <!-- Subtle pulse on active dot -->
+        <circle cx="100" cy="148" r="3.5" stroke="url(#grad-carousel)" stroke-width="1" opacity="0.15">
+          <animate attributeName="r" values="3.5;7;3.5" dur="3s" repeatCount="indefinite"/>
+          <animate attributeName="opacity" values="0.15;0.03;0.15" dur="3s" repeatCount="indefinite"/>
+        </circle>
+        <defs><linearGradient id="grad-carousel" x1="0" y1="0" x2="200" y2="160"><stop stop-color="#f59e0b"/><stop offset="1" stop-color="#e05cff"/></linearGradient></defs>
+      </svg>`,
   };
 
   return illustrations[pluginId] || '';

index.html

@@ -66,6 +66,15 @@
       <polyline points="16 9 19 12 16 15"/>
     </symbol>
 
+    <!-- Carousel icon -->
+    <symbol id="icon-carousel" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+      <rect x="6" y="4" width="12" height="16" rx="2"/>
+      <path d="M2 7v10"/>
+      <path d="M22 7v10"/>
+      <polyline points="9 10 7 12 9 14"/>
+      <polyline points="15 10 17 12 15 14"/>
+    </symbol>
+
     <!-- GitHub icon -->
     <symbol id="icon-github" viewBox="0 0 24 24" fill="currentColor">
       <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0 0 24 12c0-6.63-5.37-12-12-12z"/>
@@ -206,7 +215,7 @@ <h1 class="hero__title">
       </div>
 
       <div class="hero__stats">
-        <span class="hero__stat"><strong>5</strong> Plugins</span>
+        <span class="hero__stat"><strong>6</strong> Plugins</span>
         <span class="hero__stat"><strong>Zero</strong> Dependencies</span>
         <span class="hero__stat"><strong>WCAG 2.1</strong> AA</span>
       </div>
@@ -354,8 +363,9 @@ <h4>Plugins</h4>
             <li><a href="https://scaleflex.github.io/cloudimage-3d-view/" target="_blank" rel="noopener noreferrer">3D View</a></li>
             <li><a href="https://scaleflex.github.io/cloudimage-360-view/" target="_blank" rel="noopener noreferrer">360 View</a></li>
             <li><a href="https://scaleflex.github.io/cloudimage-hotspot/" target="_blank" rel="noopener noreferrer">Image Hotspot</a></li>
-            <li><a href="https://scaleflex.github.io/cloudimage-before-after/" target="_blank" rel="noopener noreferrer">Before / After</a></li>
             <li><a href="https://scaleflex.github.io/cloudimage-video-hotspot/" target="_blank" rel="noopener noreferrer">Video Hotspot</a></li>
+            <li><a href="https://scaleflex.github.io/cloudimage-before-after/" target="_blank" rel="noopener noreferrer">Before / After</a></li>
+            <li><a href="https://scaleflex.github.io/cloudimage-carousel/" target="_blank" rel="noopener noreferrer">Carousel</a></li>
           </ul>
         </div>
         <div class="footer__col fade-in-up">