Image Slider

Cara Membuat Slider menggunakan CSS dan HTML dengan Slide Gambar responsive lebar 300px tinggi 280px baiknya diletakkan di Gadget sebagai penghias.

Untuk membuat slide gambar (image slider) responsive dengan lebar 300px dan tinggi 280px menggunakan CSS dan HTML, Anda bisa menggunakan struktur dasar HTML dan mengatur tata letak serta animasi dengan CSS.

Demo Slider Versi 2.0

Demo Slider Versi 0.1

Slider Versi 0.1

Berikut adalah CSS dan HTML Versi 0.1.:

📜 HTML (index.html)

Contoh ini menggunakan beberapa gambar di dalam wadah (slider-container) dan CSS akan menangani tampilan slide. Anda perlu mengganti gambar1.jpg, gambar2.jpg, dst., dengan nama file gambar yang Anda miliki.

Silahkan di Copy Halal 100 %

🎨 CSS (style.css)

CSS ini mengatur lebar dan tinggi spesifik pada wadah luar, memastikan gambar menyesuaikan diri, dan menggunakan animasi untuk efek geser (slide) otomatis.

Silahkan di Copy Halal 100 %

/* Atur wadah luar untuk menetapkan dimensi spesifik */
.slider-wrapper {
    /* Dimensi yang diminta */
    width: 300px;
    height: 280px; 
    
    /* Penting: Sembunyikan gambar yang berada di luar area 300x280 */
    overflow: hidden; 
    
    /* Untuk penempatan elemen relatif (misalnya navigasi, jika ditambahkan) */
    position: relative;
    
    /* Opsional: Tambahkan border agar terlihat jelas */
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Wadah gambar, yang akan digeser (slide) */
.slider-container {
    /* Lebar total = Jumlah gambar * 100% (Misalnya, 3 gambar * 100% = 300%) */
    width: 300%; /* Sesuaikan ini jika Anda menambah/mengurangi jumlah gambar */
    height: 100%;
    
    /* Mengatur agar gambar berbaris secara horizontal */
    display: flex;
    
    /* Animasi untuk menggeser gambar */
    animation: slideAnimation 12s infinite ease-in-out; /* 12s = 4s per gambar * 3 gambar */
}

/* Setiap gambar di dalam slide */
.slider-container img {
    /* Memastikan setiap gambar mengambil 1/N bagian dari lebar .slider-container */
    /* Jika .slider-container adalah 300%, maka 100% dari 300% adalah 33.33% (1/3) */
    width: 100%; 
    height: 100%;
    
    /* Memastikan gambar mengisi area tanpa terdistorsi */
    object-fit: cover;
}

/* Keyframes untuk animasi geser */
@keyframes slideAnimation {
    /* Gambar 1 (Posisi awal) */
    0%, 30% { transform: translateX(0); }
    
    /* Gambar 2 */
    33%, 63% { transform: translateX(-100%); }
    
    /* Gambar 3 */
    66%, 96% { transform: translateX(-200%); }
    
    /* Kembali ke Gambar 1 untuk loop */
    100% { transform: translateX(0); }
}

/* Pastikan elemen body tidak mengganggu tata letak */
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    font-family: sans-serif;
}

📝 Penjelasan Penting

Dimensi Tetap:

width: 300px; dan height: 280px; pada .slider-wrapper mengatur dimensi tampilan slide sesuai permintaan Anda.

overflow: hidden;:

Ini wajib ada pada .slider-wrapper untuk menyembunyikan gambar-gambar yang sedang tidak ditampilkan di area 300x280px.

Wadah Geser (.slider-container):

width: 300%; (untuk 3 gambar) membuat wadah ini 3 kali lebih lebar dari slider-wrapper. Jika Anda memiliki 4 gambar, atur menjadi 400%.

display: flex; membuat gambar berjejer secara horizontal.

Gambar (.slider-container img):

width: 100%; pada gambar, berarti setiap gambar mengambil 100% lebar dari .slider-container, yang pada dasarnya adalah 1/N bagian dari lebar total slider-container (misalnya, 1/3 dari 300%).

Animasi (@keyframes slideAnimation):

Properti transform: translateX(...) menggeser wadah gambar.

translateX(0): Posisi awal (Gambar 1).

translateX(-100%): Menggeser ke kiri 100% dari lebar wadah gambar (menampilkan Gambar 2).

translateX(-200%): Menggeser ke kiri 200% (menampilkan Gambar 3).

Persentase dalam keyframes harus disesuaikan dengan jumlah gambar dan total durasi (12s pada contoh ini, 4s per gambar).

Anda dapat menambahkan interaksi JavaScript untuk tombol navigasi atau indikator dot jika Anda ingin kontrol manual alih-alih geser otomatis.

Slider Versi 2.0

Tentu, saya akan menambahkan shadow (bayangan), link (tautan), dan deskripsi ke setiap gambar pada contoh slide sebelumnya.

Ini adalah pembaruan pada kode HTML dan CSS Anda:

📜 HTML (index.html) - Perubahan

Kita akan membungkus setiap gambar di dalam div .slide-item untuk menampung deskripsi dan link, serta menambahkan tautan (<a>) dan paragraf deskripsi (<p>).

Silahkan di Copy Halal 100 %

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Slide Gambar dengan Shadow, Link & Deskripsi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

<div class="slider-wrapper">
        <div class="slider-container">
            
            <div class="slide-item">
                <a href="https://example.com/produk1" target="_blank">
                    <img src="gambar1.jpg" alt="Pemandangan Alam">
                    <div class="slide-info">
                        <h3>Lihat Detail Produk 1</h3>
                        <p>Deskripsi singkat tentang pemandangan alam yang indah ini.</p>
                    </div>
                </a>
            </div>

<div class="slide-item">
                <a href="https://example.com/produk2" target="_blank">
                    <img src="gambar2.jpg" alt="Arsitektur Kota">
                    <div class="slide-info">
                        <h3>Lihat Detail Produk 2</h3>
                        <p>Deskripsi singkat tentang arsitektur modern di tengah kota.</p>
                    </div>
                </a>
            </div>
            
            <div class="slide-item">
                <a href="https://example.com/produk3" target="_blank">
                    <img src="gambar3.jpg" alt="Hewan Lucu">
                    <div class="slide-info">
                        <h3>Lihat Detail Produk 3</h3>
                        <p>Deskripsi singkat tentang hewan peliharaan yang menggemaskan.</p>
                    </div>
                </a>
            </div>

</div>
    </div>

</body>
</html>

🎨 CSS (style.css) - Perubahan & Penambahan

Saya akan menambahkan properti box-shadow ke slider-wrapper dan gaya untuk deskripsi agar tampil di atas gambar.

Silahkan di Copy Halal 100 %

/* Atur wadah luar untuk menetapkan dimensi spesifik */
.slider-wrapper {
    width: 300px;
    height: 280px; 
    overflow: hidden; 
    position: relative;
    
    /* PENAMBAHAN: Box Shadow */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); /* Bayangan yang lebih menonjol */
    border-radius: 8px; /* Sudut sedikit melengkung (Opsional) */
}

/* Wadah gambar, yang akan digeser (slide) */
.slider-container {
    width: 300%; /* Sesuaikan ini jika Anda menambah/mengurangi jumlah gambar */
    height: 100%;
    display: flex;
    animation: slideAnimation 12s infinite ease-in-out;
}

/* Wadah setiap slide, untuk menampung gambar dan info */
.slide-item {
    width: 100%; /* 1/N dari lebar total .slider-container */
    height: 100%;
    position: relative; /* Penting untuk menempatkan info di atas */
}

/* Link (a) di dalam slide-item */
.slide-item a {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none; /* Hapus garis bawah pada link */
    color: inherit;
    position: relative;
}

/* Gambar di dalam slide */
.slide-item img {
    width: 100%; 
    height: 100%;
    object-fit: cover;
    display: block;
}

/* PENAMBAHAN: Gaya untuk Deskripsi & Link Info */
.slide-info {
    position: absolute;
    bottom: 0; /* Letakkan di bagian bawah gambar */
    left: 0;
    width: 100%;
    padding: 10px;
    
    /* Latar belakang semi-transparan agar tulisan terlihat */
    background: rgba(0, 0, 0, 0.6); 
    color: white;
    box-sizing: border-box; /* Pastikan padding tidak menambah lebar/tinggi */
}

.slide-info h3 {
    margin: 0 0 5px 0;
    font-size: 16px;
}

.slide-info p {
    margin: 0;
    font-size: 12px;
}

/* Keyframes untuk animasi geser tetap sama */
@keyframes slideAnimation {
    /* Gambar 1 (Posisi awal) */
    0%, 30% { transform: translateX(0); }
    
    /* Gambar 2 */
    33%, 63% { transform: translateX(-100%); }
    
    /* Gambar 3 */
    66%, 96% { transform: translateX(-200%); }
    
    /* Kembali ke Gambar 1 untuk loop */
    100% { transform: translateX(0); }
}

✨ Ringkasan Perubahan

Shadow (Bayangan): Ditambahkan box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3); ke kelas .slider-wrapper untuk memberikan efek kedalaman.

Link (Tautan): Gambar sekarang dibungkus di dalam tag <a> di HTML, membuat seluruh area gambar dapat diklik.

Deskripsi:

Struktur HTML baru: .slide-info di dalam <a>.

Properti CSS position: absolute; pada .slide-info dan position: relative; pada .slide-item memastikan deskripsi overlay (muncul di atas) gambar, biasanya di bagian bawah (bottom: 0;).