Membuat slideshow dengan javascript

Tampilan slide adalah tampilan yang sangat menarik dan banyak digunakan didalam hampir setiap website, karena dengan tampilan slide website akan terlihat menarik dan lebih hidup, biasanya tampilan slide bisa berupa konten, maupun berupa gambar. Bagi kalian yang ingin membuat tampilan slide tapi tidak tau cara membuat nya, jangan khawatir, berikut ini akan saya bahas bagaimana Cara Membuat Slideshow Sederhana dengan Javascript.

Untuk membuat tampilan slide tidak lah sulit, simak langkah-langkahnya berikut ini.

Untuk membuat slide kita akan membuat struktur HTML nya terlebih dahulu seperti berikut.

<body>

<li class="slide showing">Slide1</li>

<li class="slide">Slide 2</li>

<li class="slide">Slide3</li>

<li class="slide">Slide4</li>

<li class="slide">Slide5</li>

</ul>

</body>

Setelah kita membuat struktur dari slide nya, kita akan mendesain terlebih dahulu slide objek nya dengan CSS3 berikut ini.

.slides{

position:relative;

height:200px;

padding:0px;

margin:0px;

list-style-type:none;

}

.slide{

position:absolute;

left:0px;

top:0px;

width:100%;

height:100%;

opacity:0;

z-index:1;

-webkit-transition: opacity1s;

-moz-transition:opacity1s;

-o-transition:opacity1s;

transition:opacity1s;

}

.showing{

opacity:1;

z-index:2;

}

.slide{

font-size:40px;

padding:40px;

box-sizing:border-box;

background:#333;

color:#fff;

text-align:center;

line-height:120px;

}

.slide:nth-of-type(1){

background:red;

}

.slide:nth-of-type(2){

background:orange;

}

.slide:nth-of-type(3){

background:green;

}

.slide:nth-of-type(4){

background:blue;

}

.slide:nth-of-type(5){

background:purple;

}

Sintak diatas merupakan desain slide berupa objek warna yang akan dijadikan tampilan slide nya, setelah itu kita akan memberikan fungsi agar objek warna bisa secara otomatis berubah seperti slide, berikut sintak javascript nya.

varslides=document.querySelectorAll('#slides .slide');

varcurrentSlide=0;

varslideInterval=setInterval(nextSlide,2000);

functionnextSlide(){

slides[currentSlide].className= 'slide';

currentSlide=(currentSlide+1)%slides.length;

slides[currentSlide].className='slide showing';

}

</script>

Silahkan kalian tempatkan sintak javascript diatas didalam tag body. Setelah semua sintak diatas kalian ketikan selanjutnya simpan file dengan format .html kemudian jalankan dibrowser masing-masing dan lihat hasilnya. Maka nanti akan terlihat tampilan slide berupa objek warna yang secara otomatis bergantian seperti slide.

Baik itulah tadi tutorial sederhana bagaimana Cara Membuat Slideshow Sederhana dengan Javascript, semoga bermanfaat dan selamat mencoba 🙂

Kalian juga bisa lihat demo berikut untuk melihat hasil dari tutorial diatas. DEMO