3d-carousel-js - demo 2

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>plug-OptionPanel — Ultimate Demo</title>
  <style>
    body{margin:0;padding:24px;background:#05080f;color:#e2e8f0;font-family:system-ui}
    #app{max-width:950px;margin:0 auto}
    .page-header{text-align:center;padding:24px 0;border-bottom:1px solid #1e293b;margin-bottom:24px}
    .page-header h1{margin:0;font-size:24px;background:linear-gradient(135deg,#38bdf8,#818cf8,#f472b6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
  </style>
</head>
<body>
  <div class="page-header">
    <h1>🛍️ Premium Collection</h1>
    <p>100% by <code>plug-OptionPanel</code> • All 20 Options Working • Auto-Rebuild Engine</p>
  </div>
  <div id="app"></div>

  <script>
/**
 * plug-OptionPanel v5.1.0-HARMONIZED
 *
 * 🎯 MODULAR PLUGIN ARCHITECTURE
 *   ✓ OptionPanelCore — Orchestrator with lifecycle & preset registry
 *   ✓ CSSManager — Reference-counted, scoped CSS injection
 *   ✓ PresetBase — Abstract base for all carousel/plugins
 *   ✓ CarouselPreset — Ultimate carousel (2D/3D, ghost, infinite, dots[1,3,5,7,9])
 *   ✓ SectionBuilder — Chainable fluent API (backward compatible)
 *   ✓ Container — Instance wrapper with state management
 *   ✓ InlinePanelBuilder — Compact floating settings panels (FULL CSS)
 *
 * 🔧 HARMONIZATION FIXES (v5.1.0):
 *   ✓ Container.spoiler() accepts boolean | object | undefined
 *   ✓ Complete inline panel CSS (op-inline-*) — fully styled
 *   ✓ Animation keyframes (slide-down, fade, scale-in, bounce, etc.)
 *   ✓ Position classes (up-right, down-left, etc.)
 *   ✓ Inline grid uses configured cols/gap (not hardcoded column flow)
 *   ✓ Inline spoiler with proper max-height/opacity transitions
 *   ✓ Removed dead external script dependencies
 *   ✓ 2D/3D mode switching with state preservation
 *   ✓ Configurable dots count [1,3,5,7,9], center-selected, clickable
 *   ✓ Ghost item as rotation separator
 *   ✓ Infinite...

JavaScript

import Carousel3D from "3d-carousel-js";

customElements.define("carousel-3d", Carousel3D);