Membuat Galeri Supercar Showroom dengan Efek Accordion Slider

Jika Anda bosan dengan image slider atau carousel biasa yang harus diklik panah kanan-kirinya, saatnya beralih ke desain yang lebih modern dan elegan: Accordion Slider.

Baru-baru ini, sebuah konsep desain web menampilkan showroom mobil mewah (BMW, Bugatti, Ferrari, Porsche) dengan animasi transisi yang sangat halus. Konsep ini menggunakan teknik Flexbox dan manipulasi properti transition dengan kurva cubic-bezier untuk menciptakan efek "menyusut dan melebar" yang memukau.

Konsep: The Elastic Accordion!

• Keadaan Normal: Semua panel memiliki lebar yang sama.

• Keadaan Aktif (Hover/Klik): Panel yang dipilih melebar (expand) untuk menampilkan detail mobil, sementara panel lainnya menyusut.

• Indikator Visual: Perhatikan titik hijau neon (#9fff6b) pada kode CSS .now-showing::before. Ini adalah penanda visual yang bagus untuk memberi tahu pengguna item mana yang sedang aktif.

Berikut kode CSS

.now-showing::before {
content: "";
width: 6px;
height: 6px;
background: #9fff6b;
border-radius: 50%;
}

/* Animasi Transisi Halus (Accordion) */
.accordion-slider {
cursor: pointer;
display: flex;
position: relative;
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
overflow: hidden;

LINK SOURCE CODE

Silahkan download source codenya gratis dan untuk hasil tampilanya silahkan lihat pada video TikTok dibawah ini.

GET CODE    WATCH HERE.!

Kesimpulan

Dengan kode yang ada di dalam file tersebut, Anda bisa menciptakan galeri produk yang terlihat "mahal" dan interaktif, yang jauh lebih menarik daripada slider geser biasa..

Tertarik mencoba? Salin kode di atas ke editor teks Anda dan mulailah berkreasi, Selamat mencoba!

 Untuk Mendapatkan Info Terbaru, Silahkan Bergabung Di Saluran Kami Dibawah ini: