Cara Membuat Responsive Image Slider Post

Cara Membuat Responsive Image Slider Post - Kali ini Godydo ingin memberikan Tips dan Trik membuat Image Slider Post yang Godydo gunakan untuk postingan foto. untuk demo silahkan lihat pada postingan Foto Shizuka Doraemon Dalam Kehidupan Nyata.

Image Slider Post ini sangat cocok untuk anda yang memiliki blog dengan postingan banyak foto, jangan khawatir Slider Post ini support Template Responsive loh dan tidak akan menghambat proses loading blog anda.

Bagi sobat yang ingin mencobanya, silahkan gunakan code CSS dan HTML dibawah ini:

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}

HTML

<div class="image-container">
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6vFu8wvHtQt4T2stkNeQKFTxnQa8e4T6jQZ9aaukbwxu9GA6CEEyHBgXEmrororj1_1ImFkzoYpas3ZEoP1Mr_srDGjYJwWVooACqJ3-QB1yzN3b1Mh-4Xl8RKzKkl_JmzNUUR-cUVeNX/s1600/Tulips.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6vFu8wvHtQt4T2stkNeQKFTxnQa8e4T6jQZ9aaukbwxu9GA6CEEyHBgXEmrororj1_1ImFkzoYpas3ZEoP1Mr_srDGjYJwWVooACqJ3-QB1yzN3b1Mh-4Xl8RKzKkl_JmzNUUR-cUVeNX/s1600/Tulips.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQbkT-QgzdhwPgXlweGVDWPoQJipIxzF0Jyh8WBxO5fl7PU7qaAfBSYOIRuQJu8TC37if3zKAfKENXPtlyBtjLhdIRRE0zoOWcMRkJcnsIRhUSLC1ckkIUDZJ1aGifp_sWFHMsBzeDlCR5/s1600/Chrysanthemum.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQbkT-QgzdhwPgXlweGVDWPoQJipIxzF0Jyh8WBxO5fl7PU7qaAfBSYOIRuQJu8TC37if3zKAfKENXPtlyBtjLhdIRRE0zoOWcMRkJcnsIRhUSLC1ckkIUDZJ1aGifp_sWFHMsBzeDlCR5/s1600/Chrysanthemum.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTsorklm0O4MUlxaiULAFguvfqQgtrdrocDByvBQ6KU72oDbGX3y5LuCySBJRjYlEOGcMHXEmlSILdTpzmqjmKRwwSM17HeEjayl4xa9HLhs09I5c4CEXMFc4bqkrSmEXx2W8sSC4FfL-e/s1600/Desert.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTsorklm0O4MUlxaiULAFguvfqQgtrdrocDByvBQ6KU72oDbGX3y5LuCySBJRjYlEOGcMHXEmlSILdTpzmqjmKRwwSM17HeEjayl4xa9HLhs09I5c4CEXMFc4bqkrSmEXx2W8sSC4FfL-e/s1600/Desert.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCuwZMPFPIOaqo1HDQOZmf1C2dCb21VRdiOkLLcgdHS_Htzp_1Bp2x4rkVIf2y6PeAbph6xpq_dQIRJHQKahm5KrqVdiIjk7VsJaLlukZeCRM7ictHK_3rj7sxJUuWHGz4-lzQPrmJ3vC6/s1600/Hydrangeas.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCuwZMPFPIOaqo1HDQOZmf1C2dCb21VRdiOkLLcgdHS_Htzp_1Bp2x4rkVIf2y6PeAbph6xpq_dQIRJHQKahm5KrqVdiIjk7VsJaLlukZeCRM7ictHK_3rj7sxJUuWHGz4-lzQPrmJ3vC6/s1600/Hydrangeas.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwH0Of-vsmTWtfPZeZJtuHktHuOxf1VpeNcCzcFndhljRwyvzAJhlfqMfY87aMzAsRXax728BRQBPRcDWCQftjz_Pb02mR_Z27qt5CaOJXeSCkZ2jC5sl2ewm7cepEDtqobFh-H-Eb32Ef/s1600/Penguins.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwH0Of-vsmTWtfPZeZJtuHktHuOxf1VpeNcCzcFndhljRwyvzAJhlfqMfY87aMzAsRXax728BRQBPRcDWCQftjz_Pb02mR_Z27qt5CaOJXeSCkZ2jC5sl2ewm7cepEDtqobFh-H-Eb32Ef/s1600/Penguins.jpg" />
</div>
<div class="feature">
<img alt="feature" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6vFu8wvHtQt4T2stkNeQKFTxnQa8e4T6jQZ9aaukbwxu9GA6CEEyHBgXEmrororj1_1ImFkzoYpas3ZEoP1Mr_srDGjYJwWVooACqJ3-QB1yzN3b1Mh-4Xl8RKzKkl_JmzNUUR-cUVeNX/s1600/Tulips.jpg" />
</div>
</div>

Silahkan sobat ganti yang berwarna merah dengan URL gambar sobat yang ingin dibuat Image Slider. semoga bermanfaat.

Source: KompiAjaib

Share this post