Membuat CSS Slideshow Tutorial

Berikut ini akan diuraikan langkah-langkah cara membuat ( CSS Slideshow Tutorial ) semoga artikel kali ini bermanfaat untuk kita semua.
Adapun Cara membuat : ( CSS Slideshow Tutorial ) sebagai berikut :
DAFTAR ISI CODE [Tampilkan][Sembunyikan]

CSS Kode

.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 {....}

HTML Kode

<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>

Setelah semua kode html, (style, atau b:skin, dan javascript sudah di pasang sesuai posisinya masing-masing langkah terahir adalah Simpan, atau klik pratinjau tema terlebih dahulu,. Namun untuk saran tiada salahnya langsung klik SIMPAN dan lihat hasilnya, jika terjadi eror, dan kode tidak berfungsi dengan baik silahkan informasikan kami di kolom komentar, salam Team SAHAB BISNIS 77.

Demikian Cara membuat ( CSS Slideshow Tutorial ) semoga bermanfaat terima kasih.