Ditulis oleh: Ditulis pada: 10/10/2014
Membuat Responsive Image Slider Post Dengan CSS - Terinspirasi dari blog luar tentang membuat image slider di postingan blog dengan CSS, kini saya modif CSS style dan HTML image slider tersebut menjadi responsive image slider untuk menampilkan beberapa gambar (di sini kita menampilkan 5 buah gambar) di postingan.
Sehingga dengan begitu image slider-nya bisa menyesuaikan dengan lebar halaman postingan blog, sehingga lebih mudah dan rapih ketika halamannya diakses dengan perangkat mobile.
Di sini saya merubah kode HTML dengan tidak menggunakan link pada gambarnya sehingga kode CSS-nya pun ikut berubah agar slidernya bisa bekerja. Gambarnya akan berganti (bergeser dari kiri ke kanan) ketika thumbnail (gambar kecil) di-hover.
Untuk live demonya silahkan coba pada halaman JSFiddle pada link di bawah ini. Silahkan coba geser-geser kolomnya untuk melihat responsive-nya.
Bagi yang ingin mencobanya silahkan gunakan kode CSS dan HTML Di bawah ini.
Kode CSS
.image-container{position:relative;width:100%;height:auto;margin:0 auto;padding:0;text-align:center;overflow:hidden}
.mini-thumbnail{width:20%;height:auto;margin:0;opacity:1;display:inline-block;float:left}
.large-thumbnail{position:absolute;width:100%;height:auto;top:16.5%;left:-100%;margin:0;text-align:center;display:block;transition:left 1s ease-out}
.feature img{width:100%;height:auto;opacity:.5;z-index:1;transition:all 400ms ease-in-out}
.mini-thumbnail:hover{opacity:.5}
.image:hover .large-thumbnail{left:0;width:100%;z-index:3;transition:left 1s ease-in;opacity:1}
Jika ingin menggunakan gambar lebih dari 5 atau kurang dari 5, maka untuk lebar pada
.mini-thumbnail adalah 100%:jumlah gambar. Dan posisi top pada .large-thumbnail silahkan sesuaikan. Demo untuk gambar yang lebih dari 5 buah silahkan lihat pada link demo di bawah iniKode HTML
<div class="image-container">
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzqpoSUIBr_wSCXCFsXvot76J_f3TVpn0cz0_msiXTQVof1-KEtgx5dOj_7XW-3-haClTfzsaQrp7o00f-QZx9TisPO4l67q0tMx8rgPXc_AmdFf5HOkAWxB-AMO0h2UDVdBxz44TAUk3/s1600/Tulips.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzqpoSUIBr_wSCXCFsXvot76J_f3TVpn0cz0_msiXTQVof1-KEtgx5dOj_7XW-3-haClTfzsaQrp7o00f-QZx9TisPO4l67q0tMx8rgPXc_AmdFf5HOkAWxB-AMO0h2UDVdBxz44TAUk3/s1600/Tulips.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7a6VYEcpolyhBgl5cOb4qGeBm-D-w_HUSx7-Xk8jPDziUhnprxcGpFhnxrvGi6DDpkvUQaff2C2x36CPYK_Jpp6JQyquuRAE4H_DHGUwDd_CYIHDMOawbE78hWfAP3YbIdgx3ZOV1b6R/s1600/Chrysanthemum.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI7a6VYEcpolyhBgl5cOb4qGeBm-D-w_HUSx7-Xk8jPDziUhnprxcGpFhnxrvGi6DDpkvUQaff2C2x36CPYK_Jpp6JQyquuRAE4H_DHGUwDd_CYIHDMOawbE78hWfAP3YbIdgx3ZOV1b6R/s1600/Chrysanthemum.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ZSC15lLYvcyM9fLJ6d-N8HBe-Ye30LOw2piZeTTR-dg_AZUxhlBvZfVefc1Nt6KP_YwwoA3vvemETbjTZrCsnjnu4nouvZyIuhn-5ZqZ8Gwg1Yv1O1v6DZzKts5M0AC0qdlRw_QqMNmL/s1600/Desert.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6ZSC15lLYvcyM9fLJ6d-N8HBe-Ye30LOw2piZeTTR-dg_AZUxhlBvZfVefc1Nt6KP_YwwoA3vvemETbjTZrCsnjnu4nouvZyIuhn-5ZqZ8Gwg1Yv1O1v6DZzKts5M0AC0qdlRw_QqMNmL/s1600/Desert.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidj2r6jZX2l9adVvAqjVPDBg1-WV0uAHAMMZ2V4ysUj-_gSt4TUWsWAyZvACcs-zy1vvsqX8S3x3Y2XFtd6NEZHKoAOTijNOGzaSugphLi0w6xi3Lh4NwFmkgvZPSezWmMIlT2EG0vx-fH/s1600/Hydrangeas.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidj2r6jZX2l9adVvAqjVPDBg1-WV0uAHAMMZ2V4ysUj-_gSt4TUWsWAyZvACcs-zy1vvsqX8S3x3Y2XFtd6NEZHKoAOTijNOGzaSugphLi0w6xi3Lh4NwFmkgvZPSezWmMIlT2EG0vx-fH/s1600/Hydrangeas.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnihAO3pA8X9EmO13QIrlkd2B7VayoOGXyvOM32SsFK19AN2EDK22GqJaVD2GjixSSjN-KT_JKXkAAFidQtYa1N55z-7LIvWos7_-0s5MlggwqZnpXDI8bZPHSSKFO795B7JB75igGYbJf/s1600/Penguins.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnihAO3pA8X9EmO13QIrlkd2B7VayoOGXyvOM32SsFK19AN2EDK22GqJaVD2GjixSSjN-KT_JKXkAAFidQtYa1N55z-7LIvWos7_-0s5MlggwqZnpXDI8bZPHSSKFO795B7JB75igGYbJf/s1600/Penguins.jpg" />
</div>
<div class="feature">
<img alt="feature" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgDzqpoSUIBr_wSCXCFsXvot76J_f3TVpn0cz0_msiXTQVof1-KEtgx5dOj_7XW-3-haClTfzsaQrp7o00f-QZx9TisPO4l67q0tMx8rgPXc_AmdFf5HOkAWxB-AMO0h2UDVdBxz44TAUk3/s1600/Tulips.jpg" />
</div>
</div>
Silahkan ganti URL image-nya dengan URL image Anda sendiri. Gunakan gambar yang sama untuk
mini-thumbnail dan large-thumbnail dari masing-masing div class="image"
Untuk
class="feature" adalah untuk gambar diam ketika slider belum atau tidak di-hover, silahkan gunakan URL gambar pertama untuk mengisinya.