/* ============================================================ carousel.css — Minimalist infinite-loop carousel No jQuery. Works standalone or on multiple pages. ============================================================ */ /* ── Container ─────────────────────────────────────────────── */ .carousel { position: relative; width: 100vw; max-width: 100%; height: 500px; /* default — override per instance with inline style or a subclass */ overflow: hidden; margin: 40px 0 8px; user-select: none; -webkit-user-select: none; } /* ── Slide track ───────────────────────────────────────────── */ .carousel-inner { height: 100%; display: flex; transition: transform 0.5s ease; will-change: transform; } .carousel-item { flex-shrink: 0; height: 100%; display: flex; align-items: center; justify-content: center; cursor: zoom-in; overflow: hidden; } .carousel-item img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; } /* ── Prev / Next buttons ───────────────────────────────────── */ /* Built-in SVG chevrons — no external files required. To use your own, override background-image below. */ .carousel-controls .prev, .carousel-controls .next { position: absolute; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; background: center / auto 100% no-repeat; cursor: pointer; opacity: 0.45; transition: opacity 0.2s; z-index: 10; } .carousel-controls .prev { left: 8px; /* To use your own arrow, uncomment and replace: background-image: url('/Image/General/Graphics/ArrowPrev_W.svg'); */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='15 18 9 12 15 6' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .carousel-controls .next { right: 8px; /* To use your own arrow, uncomment and replace: background-image: url('/Image/General/Graphics/ArrowNext_W.svg'); */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpolyline points='9 18 15 12 9 6' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .carousel-controls .prev:hover, .carousel-controls .next:hover { opacity: 1; } /* ── Slide indicators ──────────────────────────────────────── */ .carousel-indicators { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 10; } .carousel-indicators span { display: block; width: 14px; height: 3px; border-radius: 2px; background: white; opacity: 0.4; cursor: pointer; transition: opacity 0.2s; } .carousel-indicators span.active { opacity: 1; } /* ── Fullscreen overlay ────────────────────────────────────── */ /* Appended to so it is never clipped by the carousel. */ .carousel-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 9999; align-items: center; justify-content: center; cursor: zoom-out; } .carousel-overlay.active { display: flex; } .carousel-overlay img { max-width: 95vw; max-height: 95vh; object-fit: contain; pointer-events: none; } /* Close hint */ .carousel-overlay::after { content: '✕'; position: absolute; top: 16px; right: 20px; color: white; font-size: 22px; opacity: 0.5; pointer-events: none; font-family: sans-serif; }