Memasang Slideshow Pada Halaman Website

source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>
Slideshow adalah istilah untuk gambar bergerak yang berubah-ubah bergantian dalam waktu yang telah ditentukan. Slideshow pada halaman website biasanya dibuat dengan Code Javascript yang dipadukan dengan CSS. gambar bergerak ini biasanya ditampilkan di halaman home dari sebuah website sehingga menjadikan interface menjadi lebih hidup.

Trik memasang Slideshow di halaman website ini merupakan sambungan postingan sebelumnya. jadi sebelum melanjutkan saya merekomendasikan agar anda membaca postingan sebelumnya agar prosesnya menjadi lebih mudah.

1. Mengatur Halaman Website dengan CSS
2. Membuat Menu dengan CSS

Sebelumnya kita sudah membuat dua buah File untuk halaman website kita yaitu 1 buah file index.html dan 1 buah file style.css. dua file tersebut telah kita sepakati untuk disimpan dalam sebuah folder. sebelum membahas lebih jauh, silahkan tambahkan 3 buah folder di dalam folder anda sehingga file-file website kita menjadi lebih rapi

1. 1 buah Folder dengan nama css (Pindahkan File CSS anda kedalam folder ini)
2. 1 buah folder dengan nama js (Folder ini akan di isi dengan File-file Javascript)
3. 1 buah folder dengan nama img (Folder ini akan di isi dengan gambar / image)

Memasang Slideshow Pada Halaman Website

Langkah - Langkah Memasang Slideshow 

- Silahkan pindahkan 3 buah gambar jpeg dikomputer anda kedalam folder img projek anda kemudian ganti namanya menjadi 1, 2 & 3.
- Download File Javascriptnya disini. extract kemudian pindahkan ke folder js yang ada di dalam folder projek anda
- Tambahkan Code berikut pada file CSS anda
/* CSS Slide Show */
#slideshow {
    position:relative;
    height:400px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
}

#slideshow IMG.active {
    z-index:10;
    opacity:1.0;
}

#slideshow IMG.last-active {
    z-index:9;
}

Simpan Code CSS anda kemudian buka file index.html

- Ganti Potongan Code <link href="css/style.css" rel="stylesheet" type="text/css"> dengan Code berikut
<!--Ini Code untuk Memanggil File CSS-->
<link href="css/style.css" rel="stylesheet" type="text/css">
<!--Ini Code untuk Memanggil Javascript CSS-->
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/javascript.js"></script>
- Tambahkan Code berikut diantara tag div isi <div id="isi"> Letakan Codenya disini </div>
<!-- Ini Isi Slideshow -->
<div id="slideshow">
    <img src="img/1.jpg" alt="Keterangan Gambar" title="Judul Gambar" width="690px" height="400px"/>
    <img src="img/2.jpg" alt="Keterangan Gambar" title="Judul Gambar" width="690px" height="400px"/>
    <img src="img/3.jpg" alt="Keterangan Gambar" title="Judul Gambar" width="690px" height="400px" class="active" />
</div>

Jangan Lupa Save File-File yang sudah anda edit. Selamat Mencoba.
source code dapat di copy dengan mengarahkan cursor ke area source code kemudian mengklik tombol dengan icon kertas putih dan <>

Share this

Related Posts

Previous
Next Post »

1 comments:

comments
28 June 2015 at 15:26 delete

Java Scriptnya kok aneh ya?
slideshow nya gak bisa jalan tuuhh , gimana dong :'( padahal lagi butuh banget iniiii
sukak banget sama blok ini suer :"" tapi tolong dong js nya di cek ulang

Reply
avatar

bantu kami untuk lebih baik; jika ada hal yang kurang jelas atau broken link silahkan masukan komentar anda kami akan segera menanggapi dan memperbaikinya. login ke akun gmail anda untuk menampilkan form komentar.