Design carousell mengunakan css

Bosan dengan desain carousel atau slider gambar yang itu-itu saja atau harus selalu mengandalkan plugin JavaScript yang berat? Di era CSS modern saat ini, Anda bisa membuat carousel yang mulus, responsif, dan interaktif hanya dengan CSS murni!

Kuncinya ada pada kombinasi properti scroll-snap-type dan overflow-x: auto. Teknik ini membuat pergerakan slider terasa pas dan menempel (snapping) di setiap kartu gambar layaknya aplikasi native di smartphone.

1. Struktur HTML (index.html)
Kita buat struktur sederhana dengan kontainer utama dan beberapa item kartu di dalamnya.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animasi Carousel CSS Otomatis</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>

    <div class="carousel-container">
        <h2>Galeri Animasi Carousel</h2>
        
        <div class="carousel-viewport">
            <div class="carousel-track">
                <!-- Slide 1 -->
                <div class="carousel-item color-1">
                    <h3>Slide 1</h3>
                    <p>Otomatis bergerak ke kiri.</p>
                </div>
                <!-- Slide 2 -->
                <div class="carousel-item color-2">
                    <h3>Slide 2</h3>
                    <p>Animasi CSS murni.</p>
                </div>
                <!-- Slide 3 -->
                <div class="carousel-item color-3">
                    <h3>Slide 3</h3>
                    <p>Tanpa JavaScript.</p>
                </div>
                <!-- Slide 4 -->
                <div class="carousel-item color-4">
                    <h3>Slide 4</h3>
                    <p>Mulus dan responsif.</p>
                </div>
                <!-- Slide 5 -->
                <div class="carousel-item color-5">
                    <h3>Slide 5</h3>
                    <p>Bisa dihentikan saat hover.</p>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

2. Kode CSS Magis (style.css)
Di sinilah trik scroll-snap bekerja. Perhatikan properti scroll-snap-type pada bagian track dan scroll-snap-align pada setiap itemnya.

/* --- Styling Dasar Tampilan --- */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #eef2f5;
    margin: 0;
    padding: 40px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.carousel-container {
    width: 100%;
    max-width: 900px;
    text-align: center;
}

.carousel-container h2 {
    color: #333;
    margin-bottom: 30px;
}

/* --- Carousel Viewport (Jendela Pandang) --- */
.carousel-viewport {
    width: 100%;
    overflow: hidden; /* Menyembunyikan item yang keluar dari viewport */
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    background: white;
    padding: 10px;
}

/* --- Carousel Track (Rel Gerak) --- */
.carousel-track {
    display: flex;
    /* Menghilangkan scrollbar bawaan */
    -ms-overflow-style: none;  /* IE dan Edge */
    scrollbar-width: none;  /* Firefox */
    
    /* Menerapkan animasi autoplay */
    animation: scrollLeft 25s linear infinite; 
}

/* Menyembunyikan scrollbar untuk Chrome/Safari/Opera */
.carousel-track::-webkit-scrollbar {
    display: none;
}

/* --- Efek Jeda Saat Kursor di Atas Carousel --- */
.carousel-track:hover {
    animation-play-state: paused; /* Animasi berhenti saat di-hover */
}


/* --- Styling Kartu Item Carousel --- */
.carousel-item {
    flex: 0 0 250px; /* Lebar tetap setiap slide 250px */
    height: 200px;
    margin: 10px; /* Jarak antar slide */
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    padding: 20px;
    transition: transform 0.3s ease;
}

/* Sedikit efek zoom saat hover pada item */
.carousel-item:hover {
    transform: scale(1.05);
}

/* Variasi Warna Background */
.color-1 { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
.color-2 { background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%); }
.color-3 { background: linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%); }
.color-4 { background: linear-gradient(135deg, #fbc2eb 0%, #a18cd1 100%); }
.color-5 { background: linear-gradient(135deg, #fdcbf1 0%, #e6dee9 100%); }

.carousel-item h3 {
    margin: 0 0 10px 0;
    font-size: 1.4rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.carousel-item p {
    margin: 0;
    font-size: 1rem;
    opacity: 0.9;
}

/* --- DEFENISI ANIMASI KEYFRAMES --- */
@keyframes scrollLeft {
    /* Posisi awal: Track diam di titik 0 */
    0% {
        transform: translateX(0);
    }
    /* Posisi akhir: Track bergeser ke kiri sejauh total lebar semua slide.
       Hitungannya: (Lebar Item 250px + Margin 20px) * 5 Slide = -1350px 
       Angka ini harus disesuaikan jika jumlah slide diubah! */
    100% {
        transform: translateX(-1350px);
    }
}

3. Kenapa Teknik Ini Sangat Powerfull?

• Tanpa JavaScript (Zero Dependencies): Anda tidak perlu memuat library tambahan seperti Swiper.js atau Slick Carousel yang sering kali memperberat loading website.
• Performa Maksimal: Karena dikelola langsung oleh rendering engine browser, animasi scrolling terasa sangat ringan dan natural, bahkan di HP berspesifikasi rendah.
• Mendukung Touch Gesture: Pengguna smartphone atau tablet bisa langsung mengusap (swipe) layar dengan jari secara natural, sementara pengguna desktop bisa menggeser scrollbar atau trackpad.