Tutorial Cara membuat slide show di web:

1. Simpan gambar-gambar yang mau di jadikan slide show dalam satu folder dan letakkan folder tersebut pada folder yg sudah di buat di htdoc. Contoh : c:exampp/htdoc/nama_folder/foldergambar

2. Agar slide show bisa jalan dengan baik kita butuh file bootstrap.css dan jquery, maka copy file assets yg berisi bootstrap.css dan jquery ini ke folder yg sudah di buat di htdoc contoh: c:xampp/htdoc/nama_folder/assets.

3. Buat lembar kerja baru atau bisa juga di sisipkan ke lembar kerja yg sudah ada .

4. ketikan kode berikut :

smk nu 01 kendal

Membuat slide show

INFORMASI TERBARU!

smk nu 01 kendal

juara lomba busana selengkapnya

bandeng presto kendal

kegiatan wawancara keada pemilik... selengkapnya

kepsek smk nu 01 kendal

Assalamu'alaikum Wr. Wb

Era globalisasi dengan segala implikasinya menjadi salah... selengkapnya

5. simpan dengan nama slide.php atau terserah sampean

#penjelasan

à href="assets/css/bootstrap.css">

“kode di atas di gunakan untuk memnghubungkan file slide.php dengan bootstrap.css. kode yg berwarna merah menunjukan letak file bootstrap.css, bisa di ganti menyesuaikan di mana sampean meletakan file tersebut ”

“kode di atas berfungsi untuk menghubungkan file slide.php dengan jquery . kode yg berwarna merah menunjukan letak file jquery.js dan bootstrap.js, bisa di ganti menyesuaikan di mana sampean meletakan file tersebut “

“kode ini berfungsi untuk mengelompokan elemen-elemen agar terlihat rapi ketika di gabungkan ke banyak tag-tag html”

INFORMASI TERBARU!

“kode ini berfungsi untuk membuat panel atau cara jawa.e kotakan, warna panel juga dapat di ubah dengan mengganti pada class=”panel panel-default” :

- panel-danger untuk warna merah.

- panel-info untuk warba biru.

- panel-warning untuk warna kuning.

- panel-success untuk warna hijau.

Dan pada kode INFORMASI TERBARU! ini untuk memberi judul pada panel, bisa di ganti menyesuaikan kebutuhan.”

“kode di atas berfungsi untuk membuat bulatan-bulatan kecil yang ada pada gambar dan ketika bulatan itu di klik maka akan menuju ke gambar yg sesui dengan nomer urut bulatan”

smk nu 01 kendal

juara lomba busana selengkapnya

“kode diatas digunakan untuk menampilkan slide show gambar.

<div class="item active"> kode active digunakan untuk menampilkan gambar pertama. Untuk gambar ke 2 ,ke-3 dan seterusnya kode active di hilangkan.

"gambar/gambar1.jpg" alt=" "> kode ini untuk memanggil file gambar yang ingin di tampilkan dan kode yg berwarna merah adalah letak dimana kita menyimpan file gambar tersebut, bisa di ganti disesuaikan dengan letak file gambar sampean.

dan

smk nu 01 kendal

kode ini berfungsi untuk memberi caption atau judul pada gambar

juara lomba busana selengkapnya
untuk menuliskan deskripsi tentang gambar tersebut dan untuk membuat link jika dibutuhkan jika tidak bisa di hilangi.

tutup div “

“kode di atas berfungsi untuk membuat arah panah left atau previous sehingga ketika di klik dapat menampilkan gambar sebelumnya. Untuk panah right atau next tinggal mengganti pada kode “prev” menjadi next, kode "glyphicon glyphicon-chevron-left" left tinggal ganti right dan previous ganti dengan next”

Hasilnya : gambar 1