Slider, Slideshow atraktif bermodal CSS

Slider, Slideshow atraktif bermodal CSS

  10 January    Andika

---

Tampilan yang di hasilkan CSS ini tak kalah keren dengan tampilan yang di hasilkan dari postingan Membuat Accordion Slideshow menggunakan CSS. Tapi tentu saja memiliki tampilan yang berbeda. Gambar utama di buat dalam ukuran asli sementara gambar lain di susun dalam bentuk thumbnail berjejer.

Untuk menghasilkan tampilan yang lebih dinamis, maka efek opacity di terapkan pada thumbnail-thumbnailnya sehingga hanya thumbnail yang di pilih saja yang tampil cerah, sementara thumbnail lainnya terlihat sedikit agak buram.

Dan lagi, semua ukuran maupun element yang di gunakan hanya sebuah sample. Untuk menerapkan pada web tertentu, mungkin kita butuh modifikasi element ini dan itu agar tampilannya terlihat lebih menyatu. Dan perlu di catat, agar tampilannya bisa maksimal, usahakan untuk menggunakan gambar yang memiliki resolusi yang sama dan pastikan hal ini juga di sesuaikan dengan resolusi maksimal yang sudah di atur pada kode CSSnya

Berikut Demonya



Langsung saja,

Kode CSSnya

.slider {
    width:640px;
    position:relative;
    padding-top:320px;
    margin:100px auto;
    box-shadow:0 10px 20px -5px rgba(0,0,0,1);
}

.slider > img {
    position:absolute;
    left:0;
    top:0;
    transition:all 0.5s;
}

.slider input[name='slide_switch'] {
    display:none;
}

.slider label {
    margin:48px 0 0 18px;
    border:2px solid #333;
    float:left;
    cursor:pointer;
    transition:all 0.5s;
    opacity:0.3;
    border-radius:6px;
}

.slider label img {
    display:block;
}

.slider input[name='slide_switch']:checked+label {
    border-color:#666;
    opacity:1;
}

.slider input[name='slide_switch'] ~ img {
    opacity:0;
    transform:scale(1.1);
}

.slider input[name='slide_switch']:checked+label+img {
    opacity:1;
    transform:scale(1);
}

Silahkan edit sesuai kebutuhan.

Kode HTMLnya

<div class="slider">
    <input type="radio" name="slide_switch" id="id1"/>
    <label for="id1">
        <img src="URL GAMBAR 1" width="100"/>
    </label>
    <img src="URL GAMBAR 1"/>
    
    <input type="radio" name="slide_switch" id="id2" checked="checked"/>
    <label for="id2">
        <img src="URL GAMBAR 2" width="100"/>
    </label>
    <img src="URL GAMBAR 2"/>
    
    <input type="radio" name="slide_switch" id="id3"/>
    <label for="id3">
        <img src="URL GAMBAR 3" width="100"/>
    </label>
    <img src="URL GAMBAR 3"/>
    
    <input type="radio" name="slide_switch" id="id4"/>
    <label for="id4">
        <img src="URL GAMBAR 4" width="100"/>
    </label>
    <img src="URL GAMBAR 4"/>
    
    <input type="radio" name="slide_switch" id="id5"/>
    <label for="id5">
        <img src="URL GAMBAR 5" width="100"/>
    </label>
    <img src="URL GAMBAR 5"/>
</div>

Jangan lupa untuk mengganti URL GAMBAR dengan url dari gambar yang ingin kamu tampilkan.

Untuk tampilannya sendiri sudah saya uji coba dan mampu bekerja dengan baik pada browser Mozilla Firefox, Internet Explorer 11 dan Google Chrome!