Membuat Responsive Image Slider Post Dengan Css

Membuat Responsive Image Slider Post Dengan CSS - Terinspirasi dari blog luar wacana menciptakan image slider di postingan blog dengan CSS, sekarang aku 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 dapat menyesuaikan dengan lebar halaman postingan blog, sehingga lebih gampang dan rapih dikala halamannya diakses dengan perangkat mobile. 

Di sini aku merubah isyarat HTML dengan tidak memakai link pada gambarnya sehingga isyarat CSS-nya pun ikut berubah biar slidernya dapat bekerja. Gambarnya akan berganti (bergeser dari kiri ke kanan) dikala 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.

DEMO

Bagi yang ingin mencobanya silahkan gunakan isyarat 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 memakai gambar lebih dari 5 atau kurang dari 5, maka untuk lebar pada .mini-thumbnail yaitu 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

DEMO

Kode HTML

 <div class="image-container">
 <div class="image">
 <img class="mini-thumbnail" alt="Membuat Responsive Image Slider Post Dengan CSS Membuat Responsive Image Slider Post Dengan CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbWin1eKRo3fbiEHc1S6T0iWEU2BuELvKmCRwG8zk6p8FCQ3DkAqenmQcfKgtvz7DQQaVRGBUjxfwg-TJ1q8fq1mezng2SfmwC2GPMkDxSmdhKqpPE53p18RgWSkOU5xxfbDK4z8i14sq/s1600/Tulips.jpg" />
 <img class="large-thumbnail" alt="Membuat Responsive Image Slider Post Dengan CSS Membuat Responsive Image Slider Post Dengan CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbWin1eKRo3fbiEHc1S6T0iWEU2BuELvKmCRwG8zk6p8FCQ3DkAqenmQcfKgtvz7DQQaVRGBUjxfwg-TJ1q8fq1mezng2SfmwC2GPMkDxSmdhKqpPE53p18RgWSkOU5xxfbDK4z8i14sq/s1600/Tulips.jpg" />
 </div>
 <div class="image">
 <img class="mini-thumbnail" alt="Membuat Responsive Image Slider Post Dengan CSS Membuat Responsive Image Slider Post Dengan CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo3Tl5U-pYUfPIbZ-i-_FMimJVey1NzMBn0K7tlR4BWoUQ8dOVKY88NL-iFhgmRLOW9FluLYCDybfk6JVm1bZOPqWJCVig7IcyLLfkmdSr90X_NJ3nHJLP6loaU-PvYxTriuZ0_64cIpQi/s1600/Chrysanthemum.jpg" />
 <img class="large-thumbnail" alt="Membuat Responsive Image Slider Post Dengan CSS Membuat Responsive Image Slider Post Dengan CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo3Tl5U-pYUfPIbZ-i-_FMimJVey1NzMBn0K7tlR4BWoUQ8dOVKY88NL-iFhgmRLOW9FluLYCDybfk6JVm1bZOPqWJCVig7IcyLLfkmdSr90X_NJ3nHJLP6loaU-PvYxTriuZ0_64cIpQi/s1600/Chrysanthemum.jpg" />
 </div>
 <div class="image">
 <img class="mini-thumbnail" alt="Membuat Responsive Image Slider Post Dengan CSS Membuat Responsive Image Slider Post Dengan CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswt5U8Z8aQosVFUNHFLDV2Z4SYJ0BBD60bQjSK16rNvPFBLISdHMHpAs9V93p2mkySKFHxZmObuJTDoDcfJnv7ZvYc9nN9kYurv83x4oCiukHZX87AiTIZo5ekWjaAtFmyW0OLqyB_7_W/s1600/Desert.jpg" />
 <img class="large-thumbnail" alt="Membuat Responsive Image Slider Post Dengan CSS Membuat Responsive Image Slider Post Dengan CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiswt5U8Z8aQosVFUNHFLDV2Z4SYJ0BBD60bQjSK16rNvPFBLISdHMHpAs9V93p2mkySKFHxZmObuJTDoDcfJnv7ZvYc9nN9kYurv83x4oCiukHZX87AiTIZo5ekWjaAtFmyW0OLqyB_7_W/s1600/Desert.jpg" />
 </div>
 <div class="image">
 <img class="mini-thumbnail" alt="Membuat Responsive Image Slider Post Dengan CSS Membuat Responsive Image Slider Post Dengan CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8ZyzmU1fkNxEUDFPGHDdFZMo9h63HX5b25BhN-SLM_We3eyDc-pdEkfVbbi5elD4PDUcZRWb-LTcfhA68jxPvQgTlpsomf_k-dH2IYSq9ZydBUdZqTLUsq_47qDkbKrBHhvxPWHs1qFy/s1600/Hydrangeas.jpg" />
 <img class="large-thumbnail" alt="Membuat Responsive Image Slider Post Dengan CSS Membuat Responsive Image Slider Post Dengan CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhs8ZyzmU1fkNxEUDFPGHDdFZMo9h63HX5b25BhN-SLM_We3eyDc-pdEkfVbbi5elD4PDUcZRWb-LTcfhA68jxPvQgTlpsomf_k-dH2IYSq9ZydBUdZqTLUsq_47qDkbKrBHhvxPWHs1qFy/s1600/Hydrangeas.jpg" />
 </div>
 <div class="image">
 <img class="mini-thumbnail" alt="Membuat Responsive Image Slider Post Dengan CSS Membuat Responsive Image Slider Post Dengan CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjITfVHztrRVqHrDiuBHnZBhBYkKHL3MsAp-AqOybM3fzpNAClqc7GMd5qlkG8rshVcI22YgcmWABUBA1ER-qNbm1wrd8oF7asw-XvgCJ4QC0z5u0IYi4ngfP2-vchPfk2UlhMQ8PN2MF4/s1600/Penguins.jpg" />
 <img class="large-thumbnail" alt="Membuat Responsive Image Slider Post Dengan CSS Membuat Responsive Image Slider Post Dengan CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjITfVHztrRVqHrDiuBHnZBhBYkKHL3MsAp-AqOybM3fzpNAClqc7GMd5qlkG8rshVcI22YgcmWABUBA1ER-qNbm1wrd8oF7asw-XvgCJ4QC0z5u0IYi4ngfP2-vchPfk2UlhMQ8PN2MF4/s1600/Penguins.jpg" />
 </div>
 <div class="feature">
 <img alt="Membuat Responsive Image Slider Post Dengan CSS Membuat Responsive Image Slider Post Dengan CSS" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKbWin1eKRo3fbiEHc1S6T0iWEU2BuELvKmCRwG8zk6p8FCQ3DkAqenmQcfKgtvz7DQQaVRGBUjxfwg-TJ1q8fq1mezng2SfmwC2GPMkDxSmdhKqpPE53p18RgWSkOU5xxfbDK4z8i14sq/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" yaitu untuk gambar membisu dikala slider belum atau tidak di-hover, silahkan gunakan URL gambar pertama untuk mengisinya.

Inspirasi: https://komporajaibku.blogspot.com//search?q=create-css-image-slider-with-thumbnails
Sumber https://www.kompiajaib.com/

Share this post