Membuat Responsive Image Slider Post Dengan CSS

Membuat Responsive Image Slider Post Dengan CSS

Bola Hero Gawai

Membuat Responsive Image Slider Post Dengan CSS

Responsive Image Slider Post
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="http://4.bp.blogspot.com/-lbRuHW4f0cI/UtHLvA_gGfI/AAAAAAAAABE/0zEFpFBIDa8/s1600/Tulips.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="http://4.bp.blogspot.com/-lbRuHW4f0cI/UtHLvA_gGfI/AAAAAAAAABE/0zEFpFBIDa8/s1600/Tulips.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="http://3.bp.blogspot.com/-Jqi3i20Puq4/UtHLYQyWJMI/AAAAAAAAAAk/PKhcyaKi7zA/s1600/Chrysanthemum.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="http://3.bp.blogspot.com/-Jqi3i20Puq4/UtHLYQyWJMI/AAAAAAAAAAk/PKhcyaKi7zA/s1600/Chrysanthemum.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="http://4.bp.blogspot.com/-HpeqiB1hM7o/UtHLeI4SBHI/AAAAAAAAAAs/DfOBqqPO25s/s1600/Desert.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="http://4.bp.blogspot.com/-HpeqiB1hM7o/UtHLeI4SBHI/AAAAAAAAAAs/DfOBqqPO25s/s1600/Desert.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="http://1.bp.blogspot.com/-tvCPB1JojJk/UtHLh379FkI/AAAAAAAAAA0/lYJQ33e2D_Q/s1600/Hydrangeas.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="http://1.bp.blogspot.com/-tvCPB1JojJk/UtHLh379FkI/AAAAAAAAAA0/lYJQ33e2D_Q/s1600/Hydrangeas.jpg" />
</div>
<div class="image">
<img class="mini-thumbnail" alt="mini-thumbnail" src="http://3.bp.blogspot.com/-U3nQz8Z08Ec/UtHLmQJEnII/AAAAAAAAAA8/kC581_pfXTY/s1600/Penguins.jpg" />
<img class="large-thumbnail" alt="large-thumbnail" src="http://3.bp.blogspot.com/-U3nQz8Z08Ec/UtHLmQJEnII/AAAAAAAAAA8/kC581_pfXTY/s1600/Penguins.jpg" />
</div>
<div class="feature">
<img alt="feature" src="http://4.bp.blogspot.com/-lbRuHW4f0cI/UtHLvA_gGfI/AAAAAAAAABE/0zEFpFBIDa8/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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×