Skip to main content

Membuat Responsive Image Slider Post Dengan CSS

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 ini


Kode 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.

Inspirasi: http://helplogger.blogspot.com/2014/01/create-css-image-slider-with-thumbnails.html

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB