Webleb - UI Elements - Supercar Showcase: Accordion Slider HTML CSS

HTML

<!DOCTYPE html>

<head>

<title>Supercar Showcase | Premium Automotive Experience</title>

<style>

/* ========================================

CSS VARIABLES & DESIGN SYSTEM

======================================== */

:root {

/* Colors */

--color-bg: #0a0a0a;

--color-bg-elevated: #141414;

--color-surface: rgba(20, 20, 20, 0.85);

--color-surface-glass: rgba(255, 255, 255, 0.05);

--color-surface-glass-hover: rgba(255, 255, 255, 0.1);

--color-border: rgba(255, 255, 255, 0.1);

--color-border-hover: rgba(255, 255, 255, 0.2);

/* Accent Colors */

--accent-primary: #ff3b30;

--accent-secondary: #007aff;

--accent-gold: #d4af37;

--accent-lime: #34c759;

/* Typography */

--font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

--font-display: 'Space Grotesk', sans-serif;

/* Font Sizes - Mobile First */

--text-xs: clamp(0.625rem, 1.5vw, 0.75rem);

--text-sm: clamp(0.75rem, 1.8vw, 0.875rem);

--text-base: clamp(0.875rem, 2vw, 1rem);

--text-lg: clamp(1rem, 2.5vw, 1.125rem);

--text-xl: clamp(1.125rem, 3vw, 1.25rem);

--text-2xl: clamp(1.25rem, 4vw, 1.5rem);

--text-3xl: clamp(1.5rem, 5vw, 2rem);

--text-4xl: clamp(2rem, 7vw, 3rem);

--text-5xl: clamp(2.5rem, 10vw, 4.5rem);

--text-6xl: clamp(3rem, 12vw, 6rem);

/* Spacing */

--space-xs: clamp(0.25rem, 1vw, 0.5rem);

--space-sm: clamp(0.5rem, 1.5vw, 0.75rem);

--space-md: clamp(0.75rem, 2vw, 1rem);

--space-lg: clamp(1rem, 3vw, 1.5rem);

--space-xl: clamp(1.5rem, 4vw, 2rem);

--space-2xl: clamp(2rem, 5vw, 3rem);

--space-3xl: clamp(3rem, 7vw, 4rem);

/* Shadows */

--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);

--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);

--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);

--shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.6);

--shadow-glow: 0 0 40px rgba(255, 59, 48, 0.3);

/* Transitions */

--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);

--transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);

--transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

--transition-spring: 600ms cubic-bezier(0.34, 1.56, 0.64, 1);

/* Border Radius */

--radius-sm: 8px;

--radius-md: 12px;

--radius-lg: 16px;

--radius-xl: 24px;

--radius-full: 9999px;

/* Z-Index Scale */

--z-base: 1;

--z-content: 10;

--z-overlay: 50;

--z-nav: 100;

--z-modal: 200;

}

/* ========================================

RESET & BASE STYLES

======================================== */

*, *::before, *::after {

box-sizing: border-box;

margin: 0;

padding: 0;

-webkit-tap-highlight-color: transparent;

}

html {

font-size: 16px;

-webkit-text-size-adjust: 100%;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-rendering: optimizeLegibility;

}

body {

font-family: var(--font-primary);

background: var(--color-bg);

color: #fff;

min-height: 100vh;

min-height: 100dvh;

overflow: hidden;

position: relative;

line-height: 1.5;

}

/* ========================================

LOADING SCREEN

======================================== */

.loading-screen {

position: fixed;

inset: 0;

background: var(--color-bg);

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

z-index: 9999;

transition: opacity 600ms ease, visibility 600ms ease;

}

.loading-screen.hidden {

opacity: 0;

visibility: hidden;

}

.loading-logo {

font-family: var(--font-display);

font-size: var(--text-3xl);

font-weight: 700;

letter-spacing: 0.2em;

text-transform: uppercase;

background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.6) 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

margin-bottom: var(--space-lg);

}

.loading-bar {

width: min(200px, 60vw);

height: 2px;

background: rgba(255,255,255,0.1);

border-radius: var(--radius-full);

overflow: hidden;

position: relative;

}

.loading-progress {

position: absolute;

left: 0;

top: 0;

height: 100%;

width: 0%;

background: linear-gradient(90deg, var(--accent-primary), var(--accent-gold));

transition: width 300ms ease;

box-shadow: var(--shadow-glow);

}

.loading-text {

font-size: var(--text-xs);

color: rgba(255,255,255,0.5);

margin-top: var(--space-md);

letter-spacing: 0.15em;

text-transform: uppercase;

}

/* ========================================

MAIN CONTAINER

======================================== */

.slider-container {

position: fixed;

inset: 0;

width: 100%;

height: 100%;

overflow: hidden;

}

/* ========================================

NOW SHOWING BADGE

======================================== */

.now-showing {

position: absolute;

top: var(--space-lg);

left: 50%;

transform: translateX(-50%);

z-index: var(--z-nav);

padding: var(--space-sm) var(--space-lg);

background: var(--color-surface-glass);

backdrop-filter: blur(20px) saturate(180%);

-webkit-backdrop-filter: blur(20px) saturate(180%);

border: 1px solid var(--color-border);

border-radius: var(--radius-full);

font-size: var(--text-xs);

font-weight: 600;

letter-spacing: 0.2em;

text-transform: uppercase;

color: rgba(255,255,255,0.9);

box-shadow: var(--shadow-md);

animation: badgeFloat 3s ease-in-out infinite;

}

@keyframes badgeFloat {

0%, 100% { transform: translateX(-50%) translateY(0); }

50% { transform: translateX(-50%) translateY(-4px); }

}

/* ========================================

ACCORDION SLIDER

======================================== */

.accordion-slider {

display: flex;

width: 100%;

height: 100%;

position: relative;

}

/* ========================================

SLIDE STYLES

======================================== */

.slide {

position: relative;

height: 100%;

flex: 1;

min-width: 60px;

cursor: pointer;

overflow: hidden;

transition: flex var(--transition-slow), filter var(--transition-base);

will-change: flex;

}

.slide::before {

content: '';

position: absolute;

inset: 0;

background: linear-gradient(

180deg,

rgba(0,0,0,0.1) 0%,

rgba(0,0,0,0.3) 50%,

rgba(0,0,0,0.8) 100%

);

z-index: 1;

transition: opacity var(--transition-base);

}

.slide::after {

content: '';

position: absolute;

inset: 0;

background: radial-gradient(

ellipse at center,

transparent 0%,

rgba(0,0,0,0.4) 100%

);

z-index: 2;

opacity: 0;

transition: opacity var(--transition-base);

}

.slide-background {

position: absolute;

inset: 0;

background-size: cover;

background-position: center;

transform: scale(1.1);

transition: transform var(--transition-slow);

}

.slide.active .slide-background {

transform: scale(1);

}

/* Slide States */

.slide.active {

flex: 5;

cursor: default;

}

.slide:not(.active) {

filter: grayscale(0.4) brightness(0.6);

}

.slide:not(.active):hover {

filter: grayscale(0.2) brightness(0.8);

}

.slide.active::after {

opacity: 1;

}

/* Vertical Divider */

.slide:not(:last-child)::before {

content: '';

position: absolute;

right: 0;

top: 10%;

height: 80%;

width: 1px;

background: linear-gradient(

180deg,

transparent 0%,

rgba(255,255,255,0.2) 50%,

transparent 100%

);

z-index: 10;

}

/* ========================================

SLIDE CONTENT

======================================== */

.slide-content {

position: absolute;

bottom: 0;

left: 0;

right: 0;

padding: var(--space-xl);

padding-bottom: calc(var(--space-3xl) + 60px);

z-index: var(--z-content);

opacity: 0;

transform: translateY(30px);

transition: opacity var(--transition-slow) 200ms, transform var(--transition-slow) 200ms;

pointer-events: none;

}

.slide.active .slide-content {

opacity: 1;

transform: translateY(0);

pointer-events: auto;

}

/* Slide Number */

.slide-number {

font-family: var(--font-display);

font-size: var(--text-5xl);

font-weight: 700;

color: rgba(255,255,255,0.08);

line-height: 1;

position: absolute;

top: -20px;

left: var(--space-xl);

user-select: none;

transition: color var(--transition-base);

}

.slide.active .slide-number {

color: rgba(255,255,255,0.15);

}

/* Car Brand */

.car-brand {

font-size: var(--text-xs);

font-weight: 600;

letter-spacing: 0.3em;

text-transform: uppercase;

color: var(--accent-primary);

margin-bottom: var(--space-xs);

opacity: 0;

transform: translateX(-20px);

transition: opacity var(--transition-base) 300ms, transform var(--transition-base) 300ms;

}

.slide.active .car-brand {

opacity: 1;

transform: translateX(0);

}

/* Car Name */

.car-name {

font-family: var(--font-display);

font-size: var(--text-4xl);

font-weight: 700;

line-height: 1.1;

margin-bottom: var(--space-sm);

background: linear-gradient(135deg, #fff 0%, rgba(255,255,255,0.8) 100%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

background-clip: text;

opacity: 0;

transform: translateY(20px);

transition: opacity var(--transition-base) 400ms, transform var(--transition-base) 400ms;

}

.slide.active .car-name {

opacity: 1;

transform: translateY(0);

}

/* Car Subtitle */

.car-subtitle {

font-size: var(--text-sm);

color: rgba(255,255,255,0.6);

margin-bottom: var(--space-lg);

opacity: 0;

transform: translateY(15px);

transition: opacity var(--transition-base) 500ms, transform var(--transition-base) 500ms;

}

.slide.active .car-subtitle {

opacity: 1;

transform: translateY(0);

}

/* ========================================

CAR SPECS - GLASSMORPHISM PANEL

======================================== */

.car-specs {

background: var(--color-surface-glass);

backdrop-filter: blur(20px) saturate(180%);

-webkit-backdrop-filter: blur(20px) saturate(180%);

border: 1px solid var(--color-border);

border-radius: var(--radius-lg);

padding: var(--space-lg);

margin-bottom: var(--space-lg);

box-shadow: var(--shadow-lg);

opacity: 0;

transform: translateY(20px) scale(0.95);

transition: opacity var(--transition-base) 600ms, transform var(--transition-base) 600ms, box-shadow var(--transition-base);

}

.slide.active .car-specs {

opacity: 1;

transform: translateY(0) scale(1);

}

.car-specs:hover {

box-shadow: var(--shadow-xl), 0 0 30px rgba(255,255,255,0.05);

border-color: var(--color-border-hover);

}

.spec-row {

display: flex;

justify-content: space-between;

align-items: center;

padding: var(--space-sm) 0;

border-bottom: 1px solid rgba(255,255,255,0.05);

}

.spec-row:last-child {

border-bottom: none;

}

.spec-label {

font-size: var(--text-xs);

color: rgba(255,255,255,0.5);

font-weight: 500;

}

.spec-value {

font-size: var(--text-xs);

color: rgba(255,255,255,0.9);

font-weight: 600;

text-align: right;

}

/* ========================================

PERFORMANCE BADGES

======================================== */

.performance-badges {

display: flex;

flex-wrap: wrap;

gap: var(--space-sm);

opacity: 0;

transform: translateY(15px);

transition: opacity var(--transition-base) 700ms, transform var(--transition-base) 700ms;

}

.slide.active .performance-badges {

opacity: 1;

transform: translateY(0);

}

.badge {

display: flex;

align-items: center;

gap: var(--space-xs);

padding: var(--space-sm) var(--space-md);

background: var(--color-surface-glass);

backdrop-filter: blur(10px);

-webkit-backdrop-filter: blur(10px);

border: 1px solid var(--color-border);

border-radius: var(--radius-full);

font-size: var(--text-xs);

font-weight: 600;

color: rgba(255,255,255,0.9);

transition: all var(--transition-base);

cursor: default;

}

.badge:hover {

background: var(--color-surface-glass-hover);

border-color: var(--color-border-hover);

transform: translateY(-2px);

box-shadow: var(--shadow-md);

}

.badge-icon {

width: 6px;

height: 6px;

border-radius: 50%;

background: var(--accent-lime);

box-shadow: 0 0 8px var(--accent-lime);

}

.badge:nth-child(2) .badge-icon {

background: var(--accent-secondary);

box-shadow: 0 0 8px var(--accent-secondary);

}

.badge:nth-child(3) .badge-icon {

background: var(--accent-gold);

box-shadow: 0 0 8px var(--accent-gold);

}

/* ========================================

ADD BUTTON

======================================== */

.add-button {

position: absolute;

bottom: var(--space-xl);

right: var(--space-xl);

width: 56px;

height: 56px;

background: linear-gradient(135deg, var(--accent-primary), #ff6b5b);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

z-index: var(--z-content);

box-shadow: 0 4px 20px rgba(255, 59, 48, 0.4);

transition: all var(--transition-spring);

opacity: 0;

transform: scale(0.8);

}

.slide.active .add-button {

opacity: 1;

transform: scale(1);

transition-delay: 800ms;

}

.add-button::before,

.add-button::after {

content: '';

position: absolute;

background: #fff;

border-radius: 2px;

transition: transform var(--transition-base);

}

.add-button::before {

width: 20px;

height: 2px;

}

.add-button::after {

width: 2px;

height: 20px;

}

.add-button:hover {

transform: scale(1.1) rotate(90deg);

box-shadow: 0 6px 30px rgba(255, 59, 48, 0.6);

}

.add-button:active {

transform: scale(0.95);

}

/* ========================================

NAVIGATION ARROWS

======================================== */

.navigation-arrows {

position: absolute;

top: 50%;

transform: translateY(-50%);

width: 48px;

height: 48px;

background: var(--color-surface-glass);

backdrop-filter: blur(20px);

-webkit-backdrop-filter: blur(20px);

border: 1px solid var(--color-border);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

cursor: pointer;

z-index: var(--z-nav);

color: #fff;

font-size: 24px;

transition: all var(--transition-base);

opacity: 0;

pointer-events: none;

}

.slider-container:hover .navigation-arrows {

opacity: 1;

pointer-events: auto;

}

.navigation-arrows:hover {

background: var(--color-surface-glass-hover);

border-color: var(--color-border-hover);

transform: translateY(-50%) scale(1.1);

box-shadow: var(--shadow-lg);

}

.navigation-arrows:active {

transform: translateY(-50%) scale(0.95);

}

.nav-prev {

left: var(--space-lg);

}

.nav-next {

right: var(--space-lg);

}

/* ========================================

SLIDE INDICATORS

======================================== */

.slide-indicators {

position: absolute;

bottom: var(--space-xl);

left: 50%;

transform: translateX(-50%);

display: flex;

gap: var(--space-sm);

z-index: var(--z-nav);

}

.indicator {

width: 8px;

height: 8px;

border-radius: var(--radius-full);

background: rgba(255,255,255,0.3);

cursor: pointer;

transition: all var(--transition-base);

}

.indicator.active {

width: 32px;

background: #fff;

box-shadow: 0 0 12px rgba(255,255,255,0.5);

}

.indicator:hover:not(.active) {

background: rgba(255,255,255,0.5);

}

/* ========================================

COLLAPSED SLIDE LABEL

======================================== */

.slide-label {

position: absolute;

bottom: 50%;

left: 50%;

transform: translateX(-50%) translateY(50%) rotate(-90deg);

white-space: nowrap;

font-family: var(--font-display);

font-size: var(--text-sm);

font-weight: 600;

letter-spacing: 0.15em;

text-transform: uppercase;

color: rgba(255,255,255,0.6);

z-index: var(--z-content);

transition: all var(--transition-base);

opacity: 1;

}

.slide.active .slide-label {

opacity: 0;

transform: translateX(-50%) translateY(50%) rotate(-90deg) scale(0.8);

}

.slide:hover .slide-label {

color: #fff;

}

/* ========================================

TOUCH GESTURE HINT

======================================== */

.gesture-hint {

position: absolute;

bottom: var(--space-2xl);

left: 50%;

transform: translateX(-50%);

display: flex;

flex-direction: column;

align-items: center;

gap: var(--space-sm);

z-index: var(--z-nav);

opacity: 0.6;

animation: hintPulse 2s ease-in-out infinite;

pointer-events: none;

}

.gesture-hint.hidden {

display: none;

}

@keyframes hintPulse {

0%, 100% { opacity: 0.4; transform: translateX(-50%) translateY(0); }

50% { opacity: 0.8; transform: translateX(-50%) translateY(-5px); }

}

.gesture-icon {

width: 40px;

height: 40px;

border: 2px solid rgba(255,255,255,0.3);

border-radius: 50%;

display: flex;

align-items: center;

justify-content: center;

}

.gesture-icon::before {

content: '↔';

font-size: 16px;

color: rgba(255,255,255,0.6);

}

.gesture-text {

font-size: var(--text-xs);

color: rgba(255,255,255,0.5);

letter-spacing: 0.1em;

text-transform: uppercase;

}

/* ========================================

RESPONSIVE BREAKPOINTS

======================================== */

/* Tablet */

@media (min-width: 768px) {

.slide-content {

padding: var(--space-2xl);

padding-bottom: calc(var(--space-3xl) + 80px);

max-width: 500px;

}

.car-specs {

padding: var(--space-xl);

}

.spec-row {

padding: var(--space-md) 0;

}

.navigation-arrows {

opacity: 1;

pointer-events: auto;

}

/* Desktop */

@media (min-width: 1024px) {

.slide-content {

max-width: 550px;

padding: var(--space-3xl);

padding-bottom: calc(var(--space-3xl) + 100px);

}

.car-name {

font-size: var(--text-5xl);

}

.add-button {

width: 64px;

height: 64px;

}

.add-button::before {

width: 24px;

}

.add-button::after {

height: 24px;

}

/* Large Desktop */

@media (min-width: 1440px) {

.slide-content {

max-width: 600px;

}

/* Mobile Portrait Optimization */

@media (max-width: 480px) and (orientation: portrait) {

.accordion-slider {

flex-direction: column;

}

.slide {

width: 100%;

height: 80px;

flex: none;

min-height: 60px;

}

.slide.active {

flex: 1;

height: auto;

}

.slide-label {

transform: translateX(-50%) translateY(50%) rotate(0deg);

}

.slide:not(:last-child)::before {

display: none;

}

.slide:not(:last-child)::after {

content: '';

position: absolute;

bottom: 0;

left: 10%;

width: 80%;

height: 1px;

background: linear-gradient(

90deg,

transparent 0%,

rgba(255,255,255,0.2) 50%,

transparent 100%

);

z-index: 10;

}

.slide-content {

padding: var(--space-lg);

padding-bottom: calc(var(--space-2xl) + 50px);

}

.car-name {

font-size: var(--text-2xl);

}

.performance-badges {

justify-content: flex-start;

}

.navigation-arrows {

display: none;

}

.gesture-hint {

display: flex;

}

/* Landscape Mobile */

@media (max-height: 500px) and (orientation: landscape) {

.slide-content {

padding: var(--space-md);

padding-bottom: var(--space-xl);

display: grid;

grid-template-columns: 1fr 1fr;

gap: var(--space-md);

max-width: 100%;

}

.slide-number,

.car-brand,

.car-name,

.car-subtitle {

grid-column: 1;

}

.car-specs {

grid-column: 2;

grid-row: 1 / span 4;

margin-bottom: 0;

}

.performance-badges {

grid-column: 1 / -1;

}

.add-button {

width: 44px;

height: 44px;

bottom: var(--space-md);

right: var(--space-md);

}

/* ========================================

REDUCED MOTION

======================================== */

@media (prefers-reduced-motion: reduce) {

*, *::before, *::after {

animation-duration: 0.01ms !important;

animation-iteration-count: 1 !important;

transition-duration: 0.01ms !important;

}

.slide-content,

.car-brand,

.car-name,

.car-subtitle,

.car-specs,

.performance-badges,

.add-button {

opacity: 1;

transform: none;

transition: none;

}

/* ========================================

DARK MODE ENHANCEMENTS

======================================== */

@media (prefers-color-scheme: dark) {

:root {

--color-bg: #000000;

--color-bg-elevated: #0a0a0a;

}

/* ========================================

HIGH CONTRAST MODE

======================================== */

@media (prefers-contrast: high) {

.slide:not(.active) {

filter: grayscale(1) brightness(0.3);

}

.car-specs,

.badge {

border-width: 2px;

}

/* ========================================

SELECTION STYLES

======================================== */

::selection {

background: var(--accent-primary);

color: #fff;

}

/* ========================================

SCROLLBAR STYLES

======================================== */

::-webkit-scrollbar {

width: 6px;

height: 6px;

}

::-webkit-scrollbar-track {

background: var(--color-bg);

}

::-webkit-scrollbar-thumb {

background: rgba(255,255,255,0.2);

border-radius: var(--radius-full);

}

::-webkit-scrollbar-thumb:hover {

background: rgba(255,255,255,0.3);

}

</style>

</head>

<body>

<div class="loading-logo">Supercar</div>

</div>

<div class="loading-text">Loading Experience</div>

</div>

<div class="now-showing">Now in Showroom</div>

<h2 class="car-name">M3 Competition</h2>

<p class="car-subtitle">Twin-Turbo Inline-6 Performance</p>

<span class="spec-label">Engine</span>

<span class="spec-value">3.0L Twin-Turbo I6</span>

</div>

<span class="spec-label">Power Output</span>

</div>

<span class="spec-label">Torque</span>

</div>

<span class="spec-label">Transmission</span>

<span class="spec-value">8-Speed M Steptronic</span>

</div>

</div>

</div>

</div>

</div>

<div class="slide-label">Huracán</div>

<div class="car-brand">Lamborghini</div>

<h2 class="car-name">Huracán EVO</h2>

<p class="car-subtitle">Naturally Aspirated V10 Excellence</p>

<span class="spec-label">Engine</span>

</div>

<span class="spec-label">Power Output</span>

</div>

<span class="spec-label">Torque</span>

</div>

<span class="spec-label">Transmission</span>

<span class="spec-value">7-Speed LDF DCT</span>

</div>

</div>

</div>

</div>

</div>

<div class="car-brand">Ferrari</div>

<h2 class="car-name">SF90 Stradale</h2>

<p class="car-subtitle">Plug-in Hybrid Revolution</p>

<span class="spec-label">Engine</span>

<span class="spec-value">4.0L V8 + 3 Electric</span>

</div>

<span class="spec-label">Power Output</span>

<span class="spec-value">1,000 HP Combined</span>

</div>

<span class="spec-label">Torque</span>

</div>

<span class="spec-label">Transmission</span>

<span class="spec-value">8-Speed F1 DCT</span>

</div>

</div>

</div>

</div>

</div>

<div class="slide-label">911 Turbo</div>

<div class="car-brand">Porsche</div>

<h2 class="car-name">911 Turbo S</h2>

<p class="car-subtitle">Twin-Turbo Flat-Six Perfection</p>

<span class="spec-label">Engine</span>

<span class="spec-value">3.8L Twin-Turbo Flat-6</span>

</div>

<span class="spec-label">Power Output</span>

</div>

<span class="spec-label">Torque</span>

</div>

<span class="spec-label">Transmission</span>

<span class="spec-value">8-Speed PDK</span>

</div>

</div>

</div>

</div>

</div>

</div>

<span class="gesture-text">Swipe to explore</span>

</div>

/* ========================================

SUPERCAR SHOWCASE - MAIN SCRIPT

Mobile-first, touch-optimized accordion slider

======================================== */

(function() {

'use strict';

// ========================================

// DOM ELEMENTS

// ========================================

const slider = document.getElementById('accordionSlider');

const slides = Array.from(slider.querySelectorAll('.slide'));

const indicators = Array.from(document.getElementById('indicators').children);

const navPrev = document.getElementById('navPrev');

const navNext = document.getElementById('navNext');

const loadingScreen = document.getElementById('loadingScreen');

const loadingProgress = document.getElementById('loadingProgress');

const gestureHint = document.getElementById('gestureHint');

// ========================================

// STATE

// ========================================

let currentIndex = 0;

let isTransitioning = false;

let touchStartX = 0;

let touchStartY = 0;

let touchEndX = 0;

let touchEndY = 0;

let autoPlayInterval = null;

let isAutoPlaying = false;

// Configuration

const config = {

transitionDuration: 500,

autoPlayDelay: 6000,

swipeThreshold: 50,

verticalSwipeThreshold: 100

};

// ========================================

// LOADING SIMULATION

// ========================================

function simulateLoading() {

let progress = 0;

const interval = setInterval(() => {

progress += Math.random() * 15 + 5;

if (progress >= 100) {

progress = 100;

clearInterval(interval);

setTimeout(() => {

loadingScreen.classList.add('hidden');

initSlider();

}, 300);

}

loadingProgress.style.width = progress + '%';

}, 100);

}

// ========================================

// SLIDER INITIALIZATION

// ========================================

function initSlider() {

// Set initial active state

updateSlider(0, false);

// Start autoplay after user interaction hint

setTimeout(() => {

gestureHint.classList.add('hidden');

}, 3000);

}

// ========================================

// UPDATE SLIDER STATE

// ========================================

function updateSlider(index, animate = true) {

if (isTransitioning && animate) return;

isTransitioning = animate;

currentIndex = index;

// Update slides

slides.forEach((slide, i) => {

slide.classList.toggle('active', i === index);

});

// Update indicators

indicators.forEach((indicator, i) => {

indicator.classList.toggle('active', i === index);

});

// Reset transition lock

if (animate) {

setTimeout(() => {

isTransitioning = false;

}, config.transitionDuration);

}

// Reset autoplay

resetAutoPlay();

}

// ========================================

// NAVIGATION FUNCTIONS

// ========================================

function goToSlide(index) {

if (index < 0) index = slides.length - 1;

if (index >= slides.length) index = 0;

if (index === currentIndex) return;

updateSlider(index);

}

function nextSlide() {

goToSlide(currentIndex + 1);

}

function prevSlide() {

goToSlide(currentIndex - 1);

}

// ========================================

// AUTOPLAY

// ========================================

function startAutoPlay() {

if (isAutoPlaying) return;

isAutoPlaying = true;

autoPlayInterval = setInterval(nextSlide, config.autoPlayDelay);

}

function stopAutoPlay() {

isAutoPlaying = false;

if (autoPlayInterval) {

clearInterval(autoPlayInterval);

autoPlayInterval = null;

}

function resetAutoPlay() {

stopAutoPlay();

// Don't auto-start on mobile

if (window.matchMedia('(min-width: 768px)').matches) {

startAutoPlay();

}

// ========================================

// EVENT LISTENERS - CLICK/TAP

// ========================================

// Slide click to activate

slides.forEach((slide, index) => {

slide.addEventListener('click', (e) => {

// Don't activate if clicking on interactive elements

if (e.target.closest('.add-button') || e.target.closest('.car-specs')) {

return;

}

if (index !== currentIndex) {

goToSlide(index);

}

});

// Add button interaction

const addButton = slide.querySelector('.add-button');

if (addButton) {

addButton.addEventListener('click', (e) => {

e.stopPropagation();

showNotification('Added to collection');

// Animate button

addButton.style.transform = 'scale(0.9)';

setTimeout(() => {

addButton.style.transform = '';

}, 150);

});

}

});

// Indicator clicks

indicators.forEach((indicator, index) => {

indicator.addEventListener('click', () => goToSlide(index));

});

// Navigation arrows

navPrev.addEventListener('click', prevSlide);

navNext.addEventListener('click', nextSlide);

// ========================================

// KEYBOARD NAVIGATION

// ========================================

document.addEventListener('keydown', (e) => {

switch(e.key) {

case 'ArrowLeft':

e.preventDefault();

prevSlide();

break;

case 'ArrowRight':

e.preventDefault();

nextSlide();

break;

case 'Home':

e.preventDefault();

goToSlide(0);

break;

case 'End':

e.preventDefault();

goToSlide(slides.length - 1);

break;

}

});

// ========================================

// TOUCH GESTURES

// ========================================

slider.addEventListener('touchstart', (e) => {

touchStartX = e.touches[0].clientX;

touchStartY = e.touches[0].clientY;

stopAutoPlay();

}, { passive: true });

slider.addEventListener('touchmove', (e) => {

// Prevent default only for horizontal swipes

const diffX = e.touches[0].clientX - touchStartX;

const diffY = e.touches[0].clientY - touchStartY;

if (Math.abs(diffX) > Math.abs(diffY)) {

e.preventDefault();

}

}, { passive: false });

slider.addEventListener('touchend', (e) => {

touchEndX = e.changedTouches[0].clientX;

touchEndY = e.changedTouches[0].clientY;

handleSwipe();

}, { passive: true });

function handleSwipe() {

const diffX = touchStartX - touchEndX;

const diffY = touchStartY - touchEndY;

// Horizontal swipe detection

if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > config.swipeThreshold) {

if (diffX > 0) {

nextSlide();

} else {

prevSlide();

}

// Hide gesture hint after first swipe

gestureHint.classList.add('hidden');

}

// ========================================

// MOUSE WHEEL NAVIGATION

// ========================================

let wheelTimeout = null;

slider.addEventListener('wheel', (e) => {

e.preventDefault();

if (wheelTimeout) return;

wheelTimeout = setTimeout(() => {

wheelTimeout = null;

}, 300);

if (e.deltaY > 0 || e.deltaX > 0) {

nextSlide();

} else {

prevSlide();

}

}, { passive: false });

// ========================================

// NOTIFICATION SYSTEM

// ========================================

function showNotification(message) {

// Remove existing notification

const existing = document.querySelector('.notification');

if (existing) existing.remove();

// Create notification

const notification = document.createElement('div');

notification.className = 'notification';

notification.textContent = message;

notification.style.cssText = `

position: fixed;

top: 20px;

left: 50%;

transform: translateX(-50%) translateY(-100px);

background: rgba(20, 20, 20, 0.95);

backdrop-filter: blur(20px);

-webkit-backdrop-filter: blur(20px);

border: 1px solid rgba(255, 255, 255, 0.1);

border-radius: 12px;

padding: 16px 24px;

color: #fff;

font-size: 14px;

font-weight: 500;

z-index: 10000;

box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);

transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);

`;

document.body.appendChild(notification);

// Animate in

requestAnimationFrame(() => {

notification.style.transform = 'translateX(-50%) translateY(0)';

});

// Remove after delay

setTimeout(() => {

notification.style.transform = 'translateX(-50%) translateY(-100px)';

notification.style.opacity = '0';

setTimeout(() => notification.remove(), 300);

}, 2000);

}

// ========================================

// VISIBILITY API - Pause when hidden

// ========================================

document.addEventListener('visibilitychange', () => {

if (document.hidden) {

stopAutoPlay();

} else {

resetAutoPlay();

}

});

// ========================================

// RESIZE HANDLER

// ========================================

let resizeTimeout = null;

window.addEventListener('resize', () => {

clearTimeout(resizeTimeout);

resizeTimeout = setTimeout(() => {

// Recalculate any dimension-dependent values

isTransitioning = false;

}, 150);

}, { passive: true });

// ========================================

// PREFERS REDUCED MOTION

// ========================================

const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

if (prefersReducedMotion.matches) {

config.transitionDuration = 0;

}

// ========================================

// INITIALIZE

// ========================================

document.addEventListener('DOMContentLoaded', simulateLoading);

// Preload images

const imageUrls = slides.map(slide => {

const bg = slide.querySelector('.slide-background');

return bg ? getComputedStyle(bg).backgroundImage.slice(4, -1).replace(/"/g, '') : null;

}).filter(Boolean);

let loadedImages = 0;

imageUrls.forEach(url => {

const img = new Image();

img.onload = () => {

loadedImages++;

if (loadedImages === imageUrls.length) {

// All images loaded

}

};

img.onerror = () => {

loadedImages++;

};

img.src = url;

});

})();

</script>

</body>

</html>

CSS

JS

Supercar Showcase: Accordion Slider HTML CSS

Recommended