Memasang Widget Slideshow Foto Tanpa Java Script

Slideshow merupakan tampilan gambar atau objek lain yang saling bergantian dalam beberapa saat. Misalkan dari slide gambar pertama, ganti ke slide kedua, begitu seterusnya hingga kembali ke slide pertama dan akan berulang secara terus menerus.

Banyak dari kalangan blogger yang memasang widget slideshow demi mempercantik tampilan blognya, terlebih tema templatenya tentang photography, pastinya sangat membutuhkan widget seperti itu agar tampilan blognya menjadi enak dilihat dan terasa lezat di mata para pengunjungnya.

Saya menyadari bahwa template dengan tema yang penuh gambar pasti loading blognya akan terasa berat dan membuat pengunjung jadi kurang. Dan saya yakin bahwa template sodara yang bertema seperti itu pastinya sudah terpasang banyak javascript, Oleh karena itu disini saya akan membantu sodara yang sedang mencari cara untuk memasang widget slideshow hanya dengan HTML dan CSS dan pastinya tanpa Javascript.

Untuk memasang widget ini sangat mudah, Sodara cukup pergi ke Tata Letak, selanjutnya Tambahkan Gadget kemudian pilih gadget HTML/JavaScript dan tambahkan kode dibawah ini.


<div class="ican-slideshow">
  <div class='ican-slideshow-poto' style='background-image: url("https://sdia15.sch.id/wp-content/uploads/2018/11/10-OKTOBER-6.jpg")'></div>
  <div class='ican-slideshow-poto' style='background-image: url("https://sdia15.sch.id/wp-content/uploads/2018/09/40290191_976938579145886_8171314428990455808_n.jpg")'></div>
<div class='ican-slideshow-poto' style='background-image: url("https://sdia15.sch.id/wp-content/uploads/2018/11/WhatsApp-Image-2018-04-23-at-11.51.04-1228x691.jpeg")'></div>
  <div class='ican-slideshow-poto' style='background-image: url("https://sdia15.sch.id/wp-content/uploads/2018/11/IMG_2070.jpg")'></div>
  <div class='ican-slideshow-poto' style='background-image: url("https://sdia15.sch.id/wp-content/uploads/2017/07/mpls-614x346.jpg")'></div>
</div>
<style>
.ican-slideshow {    
 position: relative;    
 width: auto;    
 height: 300px;    
 overflow: hidden;   
}
 .ican-slideshow-poto {    
 position: absolute;    
 width: 100%;    
 height: 100%;    
 background: no-repeat 50% 50%;    
 background-size: cover;    
 -webkit-animation-name: kenburns;    
 animation-name: kenburns;    
 -webkit-animation-timing-function: linear;    
 animation-timing-function: linear;    
 -webkit-animation-iteration-count: infinite;    
 animation-iteration-count: infinite;    
 -webkit-animation-duration: 30s;    
 animation-duration: 30s;    
 opacity: 1;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
}    
.ican-slideshow-poto:nth-child(1) {    
 -webkit-animation-name: kenburns-1;    
 animation-name: kenburns-1;    
 z-index: 4;    
}    
.ican-slideshow-poto:nth-child(2) {    
 -webkit-animation-name: kenburns-2;    
 animation-name: kenburns-2;    
 z-index: 3;    
}    
.ican-slideshow-poto:nth-child(3) {    
 -webkit-animation-name: kenburns-3;    
 animation-name: kenburns-3;    
 z-index: 2;    
}    
.ican-slideshow-poto:nth-child(4) {    
 -webkit-animation-name: kenburns-4;    
 animation-name: kenburns-4;    
 z-index: 1;    
}    
.ican-slideshow-poto:nth-child(5) {    
 -webkit-animation-name: kenburns-5;    
 animation-name: kenburns-5;    
 z-index: 0;    
}    
@-webkit-keyframes kenburns-1 {    
 0% {    
 opacity: 1;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 5% {    
 opacity: 1;    
 }    
 15% {    
 opacity: 1;    
 }    
 25% {    
 opacity: 0;    
 -webkit-transform: scale(1);    
 transform: scale(1);    
 }    
 100% {    
 opacity: 0;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 95% {    
 opacity: 0;    
 -webkit-transform: scale(1.24);    
 transform: scale(1.24);    
 }    
 100% {    
 opacity: 1;    
 }    
}    
@keyframes kenburns-1 {    
 0% {    
 opacity: 1;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 5% {    
 opacity: 1;    
 }    
 15% {    
 opacity: 1;    
 }    
 25% {    
 opacity: 0;    
 -webkit-transform: scale(1);    
 transform: scale(1);    
 }    
 100% {    
 opacity: 0;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 95% {    
 opacity: 0;    
 -webkit-transform: scale(1.24);    
 transform: scale(1.24);    
 }    
 100% {    
 opacity: 1;    
 }    
}    
@-webkit-keyframes kenburns-2 {    
 15% {    
 opacity: 1;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 25% {    
 opacity: 1;    
 }    
 35% {    
 opacity: 1;    
 }    
 45% {    
 opacity: 0;    
 -webkit-transform: scale(1);    
 transform: scale(1);    
 }    
 100% {    
 opacity: 0;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
}    
@keyframes kenburns-2 {    
 15% {    
 opacity: 1;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 25% {    
 opacity: 1;    
 }    
 35% {    
 opacity: 1;    
 }    
 45% {    
 opacity: 0;    
 -webkit-transform: scale(1);    
 transform: scale(1);    
 }    
 100% {    
 opacity: 0;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
}    
@-webkit-keyframes kenburns-3 {    
 35% {    
 opacity: 1;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 45% {    
 opacity: 1;    
 }    
 55% {    
 opacity: 1;    
 }    
 65% {    
 opacity: 0;    
 -webkit-transform: scale(1);    
 transform: scale(1);    
 }    
 100% {    
 opacity: 0;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
}    
@keyframes kenburns-3 {    
 35% {    
 opacity: 1;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 45% {    
 opacity: 1;    
 }    
 55% {    
 opacity: 1;    
 }    
 65% {    
 opacity: 0;    
 -webkit-transform: scale(1);    
 transform: scale(1);    
 }    
 100% {    
 opacity: 0;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
}    
@-webkit-keyframes kenburns-4 {    
 55% {    
 opacity: 1;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 65% {    
 opacity: 1;    
 }    
 75% {    
 opacity: 1;    
 }    
 85% {    
 opacity: 0;    
 -webkit-transform: scale(1);    
 transform: scale(1);    
 }    
 100% {    
 opacity: 0;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
}    
@keyframes kenburns-4 {    
 55% {    
 opacity: 1;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 65% {    
 opacity: 1;    
 }    
 75% {    
 opacity: 1;    
 }    
 85% {    
 opacity: 0;    
 -webkit-transform: scale(1);    
 transform: scale(1);    
 }    
 100% {    
 opacity: 0;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
}    
@-webkit-keyframes kenburns-5 {    
 75% {    
 opacity: 1;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 85% {    
 opacity: 1;    
 }    
 95% {    
 opacity: 1;    
 }    
 100% {    
 opacity: 0;    
 -webkit-transform: scale(1);    
 transform: scale(1);    
 }    
}    
@keyframes kenburns-5 {    
 75% {    
 opacity: 1;    
 -webkit-transform: scale(1.2);    
 transform: scale(1.2);    
 }    
 85% {    
 opacity: 1;    
 }    
 95% {    
 opacity: 1;    
 }    
 100% {    
 opacity: 0;    
 -webkit-transform: scale(1);    
 transform: scale(1);    
 }    
}    
</style>

*Jangan lupa untuk ganti url potonya dengan poto sodara yang ingin dijadikan slideshow

Jika sodara sudah memasang kode tersebut diatas widget main-wrapper, maka tampilannya akan seperti dibawah ini.

Tetapi jika sodara memasangnya dibagian sidebar maka tampilannya akan otomatis seperti dibawah ini, karena saya mengukur lebarnya widget tergantung pada ukuran widget yang ada pada template sodara.

Mudah kan??? Semoga dengan Cara seperti diatas bisa membantu sodara agar tampilan blognya menjadi menarik. Tetapi jika sodara merasa kebingungan atau menerapkan seperti yang ada diatas namun hasilnya tidak sesuai, Sodara bisa langsung bertanya lewat komentar yang sudah disediakan.

Comments