Hampir di setiap website kita temui slideshow. Kali ini saya berikan contoh membuat slideshow yang sangat simple hanya dengan menggunakan CSS, tanpa javascript.
CSS3 memiliki property “animation” yang akan kita gunakan untuk mengganti 1 gambar dengan gambar lainnya.
Pertama kita berikan nama animation : slideshow
dengan durasi: 9 detik (3 gambar masing masing tampil 3 detik)
dan kecepatan tiap slide berjalan sama atau linear.
Supaya slideshow ini jalan terus maka kita berikan animation-iteration-count: infinite.
img {
animation-name: slideshow;
animation-duration: 9s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
4 baris property “animation” poada css tersebut bisa kita singkat penulisannya (shorthand CSS) menjadi:
animation: slideshow 9s linear 0s infinite;
Kemudian kita buat @Keyframes untuk animation-name: slideshow untuk memberikan efek transisi antar gambar tersebut.
@keyframes slideshow {
25% { opacity: 1;}
33.33% { opacity: 0;}
91.66% { opacity: 0;}
100% { opacity: 1;}
}
Berikut coding selengkapnya.
<!DOCTYPE HTML>
<html>
<head>
<title>Slideshow CSS3</title>
<style>
div {margin: 100px 200px; }
img {
position: absolute;
z-index: 3;
animation: slideshow 9s linear 0s infinite;
}
img:nth-child(2) {
z-index: 2;
animation: slideshow 9s linear 3s infinite;
}
img:nth-child(3) {
z-index: 1;
animation: slideshow 9s linear 6s infinite;
}
@keyframes slideshow {
25% { opacity: 1;}
33.33% { opacity: 0;}
91.66% { opacity: 0;}
100% { opacity: 1;}
}
</style>
</head>
<body>
<div>
<img src="images/img_1.jpg" alt="Gambar 1"/>
<img src="images/img_2.jpg" alt="Gambar 2"/>
<img src="images/img_3.jpg" alt="Gambar 3"/></div>
</body>
</html>
Coding Website 