CSS Slideshow Tutorial

Image Gallery Slideshow With CSS Keyframes

CSS Slideshow Tutorial - Tampilan saya sederhanakan dan dimodifikasi ulang dari postingan sebelumnya tentang » Efek Slide Show Otomatis Pada Gambar, efek pergantian gambar slide menggunakan elemen CSS animation-delay dengan skala per 6s (6detik).

Konsep Dasar Membuat Slideshow Effect
1.1 CSS Element

Siapkan beberapa Gambar yang akan kita susun dalam album, yang nantinya akan ditampilkan secara bergantian satu gambar per 6detik dengan efek otomatis slide, susunannya seperti ini:


/* tanpa animation-delay */
.pic-1 {opacity:1;background:url(http://URL-Gambar)}
.pic-2 {
  /* with animation-delay per (6detik) */
  animation-delay: 6s;
  background:url(http://URL-Gambar)
}

/* sampai gambar berikutnya, dengan selisih 6detik (delay:6s) */
.pic-3 {....}
.pic-4 {....}

Selanjutnya tinggal menyusun bentuk pergantian gambar dengan slideshow perintah, namun jangan lupa untuk membuat pergantian gambarnya secara terus menerus, gambar akan berganti dengan selang waktu 6 detik sampai menampilkan gambar terakhir, dan akan kembali ke gambar pertama, begitu seterusnya (otomatis slide) menggunakan animation:linear infinite seperti ini:


figure {
  position:absolute;
  width:100%;
  height:100%;
  opacity:0;
  animation:slideShow 24s linear infinite 0s
}

/* Tahap akhir memanggil fungsinya dengan media keyframes (@keyframes) */
@keyframes slideShow {
  0% {opacity:0;transform:scale(1)}
  4% {opacity:1}
  24% {opacity:1}
  28% {opacity:0;transform:scale(1.1)}
  100% {opacity: 0;transform:scale(1)}
}

1.2 HTML Markup

Selesai menyusun semua konsepnya dengan CSS, tinggal menampilkan hasil kerja Anda dengan pemanggil HTML berdasarkan atribut class(.) atau id(#) sesuai tahap penyusunan yang Anda deklerasikan seperti ini:


<div class="pic-wrapper">
   <figure class="pic-1"></figure>
   <figure class="pic-2"></figure>
   <figure class="pic-3"></figure>
   <figure class="pic-4"></figure>
</div>

Dan hasilnya :




DEMO SHOW



Bagaimana menurut sahabat semua pecinta SAHABAT BLOGGER 77, cara membuat efek slideshow dengan CSS seperti diatas cukup mudah bukan..!!. Yang terpenting adalah ukuran dan waktu pergantian gambar harus sesuai dengan gambar yang akan ditampilkan berikutnya.

Susunan CSS lengkapnya seperti ini:

.pic-wrapper {position:relative;height:250px;width:40%;margin:0 auto}
figure {
  position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;
  animation: slideShow 24s linear infinite 0s;
  -moz-animation: slideShow 24s linear infinite 0s;
  -webkit-animation: slideShow 24s linear infinite 0s}

.pic-1 {opacity:1;border:3px solid yellow;background:url(http://URL-Gambar)}
.pic-2 {
  animation-delay: 6s;-moz-animation-delay: 6s;-webkit-animation-delay: 6s;
  border:3px solid lime;background:url(http://URL-Gambar)}

.pic-3 {
  animation-delay: 12s;-moz-animation-delay: 12s;-webkit-animation-delay: 12s;
  border:3px solid aqua;background:url(http://URL-Gambar)}

.pic-4 {
  animation-delay: 18s;-moz-animation-delay: 18s;-webkit-animation-delay: 18s;
  border:3px solid red;background: url(http://URL-Gambar)}

.pic-1,.pic-2,.pic-3,.pic-4 {
  -webkit-background-size: cover;
  -moz-background-size: cover;
   background-size: cover}

@keyframes slideShow {
0% {opacity:0;transform:scale(1)}
4% {opacity:1}
24% {opacity:1}
28% {opacity:0;transform:scale(1.1)}
100% {opacity: 0;transform:scale(1)}}

/* insert support peramban browser codes */
@-webkit-keyframes slideShow {....}
@-moz-keyframes slideShow {....}
@-ms-keyframes slideShow {....}
@-o-keyframes slideShow {....}

<div class="pic-wrapper">
<figure class="pic-1"></figure>
<figure class="pic-2"></figure>
<figure class="pic-3"></figure>
<figure class="pic-4"></figure>
</div>