Galeri Gambar Efek Slider Desain Terbaru

Galeri Gambar Efek Slider Desain Terbaru - Banyak cara dalam membuat tampilan gambar dengan berbagai efek, salah satunya dengan mengubah tampilan galeri gambar dengan efek slider seperti ini:




DEMO SHOW



Galeri merupakan sekumpulan gambar dalam satu wadah yang kesemuanya dapat kita lihat layaknya seperti "ALBUM FOTO". Desain kali ini saya mengambil tema efek slider terbaru dikarenakan pada efek-efek gambar sebelumnya, saya banyak mengubah elemen kodenya dengan penggunaan perintah JavaScript. Sehingga banyak yang khawatir menggunakannya dengan alasan beban loading pada blog akan mempengaruhi, koleksi efek galeri gambar sebelumnya dapat Anda lihat pada TAB di bawah ini:

Gallery Image

• Descriptions Hover
• Slide No Jump
• Keyframes Show
• According Effect
• Carousel 3D

Jika dengan penggunaan JavaScript yang menjadi alasan sahabat semua, maka rangkaian kode berikut saya akan coba membuat tampilan galeri gambar dengan efek slider hanya dengan CSS. Jadi sudah tidak ada alasan lagi ya untuk khawatir terhadap beban loading blog, hehe..!!
Kodenya seperti ini:

<style type="text/css">
/*slider images radio type with css only
input[type='radio'] {input code='no-script'}
design from: devy indriyani
url='http://sahabatblogger77.blogspot.com/'
*/
.slider-img {
  background: #A0522D;
  height: 355px;
  padding: 10px;
  position: relative;
  margin:-4em auto;
  border:2px solid #e06666;
  border-radius:8px;
  box-shadow: 0 30px 50px -20px black;
  overflow: hidden;}

label{
  width: 134px;
  height: 73px;
  cursor: pointer;
  position: relative;
  margin: 280px 0 0 10px;
  float: left;
  box-sizing: border-box;}

label:hover{border: solid 3px #ccc;}
#slide1:checked ~ .slide1{border: solid 3px #7FFFD4;}
#slide2:checked ~ .slide2{border: solid 3px #7FFFD4;}
#slide3:checked ~ .slide3{border: solid 3px #7FFFD4;}
#slide4:checked ~ .slide4{border: solid 3px #7FFFD4;}
#slide5:checked ~ .slide5{border: solid 3px #7FFFD4;}

.pic {
  background: #ccc;
  width: 100%;
  height: 73%;
  margin:-20px 0 0 -3px;
  border:2px inset #ddd;
  transition: background .3s linear;
  -webkit-transition: background .3s linear;
  -moz-transition: background .3s linear;}

input[type='radio'] {opacity: 0;position: absolute;z-index: -9999;}
input[type='radio']:checked {content: '';border: solid 3px #ccc;}
input[type='radio']:hover{border: solid 3px #7FFFD4;z-index: 9999;}

.slide1 {background: url(.../img-1.jpg);background-size: cover;}
.slide2 {background: url(.../img-2.jpg);background-size: cover;}
.slide3 {background: url(.../img-3.jpg);background-size: cover;}
.slide4 {background: url(.../img-3.jpg);background-size: cover;}
.slide5 {background: url(.../img-3.jpg);background-size: cover;}

#slide1:checked ~ .pic {background: url(.../img-1.jpg)}
#slide2:checked ~ .pic {background: url(.../img-2.jpg)}
#slide3:checked ~ .pic {background: url(.../img-3.jpg)}
#slide4:checked ~ .pic {background: url(.../img-3.jpg)}
#slide5:checked ~ .pic {background: url(.../img-3.jpg)}
</style>

Perhatikan kode yang saya beri warna MERAH - background: url(.../img-1.jpg), belum ada gambar. Anda bisa gunakan URL gambar berikut sebagai bahan percobaan, agar nantinya Anda bisa mengubahnya dengan URL-gambar Anda sendiri.

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFDxvflY1oMbwLEhb10DchULzq2e9YSUW-VEDiYCrWKS03fJAIKLXEVhx8oVhOFf4ox9tVVa-LB6bbpe0bBLAJB_DiGXlr-yZ8dwoPKJD4NkVEY5VqBc-BfH61XnpjXONvqPkB_ZuiaCg/s1600/img-1.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYui8Fp4hJmZmeS2vvIRv7Fzelp0MaDKL3PESg5fGvtbwGVYxhFjhVy5372mWibWd8xXzuK2sYIaUjwaYOkxaZhmsAJS0RFaPZhH0_v1kESSWjnpDgQLRpdH5Ehumj6sUnHVjbHlypTnU/s1600/img-2.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFB_knNC5-4OGq3RvgXttISzZaPwgNEole7fMSXXFT1oy8P-w6aTI5-kbhB6NlKZGkrMYY3TkWvE5f5N3QjPR13XFCKD0Y6we1yEOkDPbSXt4Uofg3qpHQVaC3PMbap4h5WK6s9U0RDXM/s1600/img-3.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZ79KTxY4yPSVDD4KrE9Ds6sF7kXJRcjbcMaKcKiWbRj8ut05ERetyq2vAU4fIKS3S8D-nvaTQTtJNpme1tnZKfhuHOIrDXk3eUnkyFb8DdXP6mjJVRZbAFPjoaqXHGWtUU2pnYe71vY0/s1600/img-4.jpg

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5Sa3tL-gSYvp6ctaBCg2omiJW8oYtREnCHvgvdesWA2lqIn66esaJQh9rOPGr3caS1TeBABG1gz8KFP2H9EXTfCH1_asKZvqoYG6EjOkIxp9gmbWHyma0au4Ps65KIdwqkdS4oKH4s1o/s1600/img-5.jpg

Saatnya penerapan hasil kerja Anda dengan penempatan HTML seperti ini:

<div class='slider-img'>
<input checked='' id='slide1' name='thumbnail' type='radio' /><label class='slide1' for="slide1"></label>
<input id='slide2' name='thumbnail' type='radio' /><label for="slide2" class='slide2'></label>
<input id='slide3' name='thumbnail' type='radio' /><label for="slide3" class='slide3'></label>
<input id='slide4' name='thumbnail' type='radio' /><label for="slide4" class='slide4'></label>
<input id='slide5' name='thumbnail' type='radio' /><label for="slide5" class='slide5'></label>
   <div class='pic'>
   </div>
</div>

Seseorang akan terlihat senang jika apa yang sebelumnya tidak mereka ketahui, tetapi dapat dengan mudah membuatnya, karenanya tutorial tentang Galeri Gambar Efek Slider Desain Terbaru kali ini, saya persembahkan terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77.

Semoga bermanfaat. Happy blogging..!!