[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3

[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3 Oleh: Arinadi Nur Rohmad

Oke, Membuat slide show adalah pekerjaan yang sulit untuk yang baru belajar CSS karena pada dasarnya Slide Show dibuat dengan Javascript. Untuk saya, Js adalah bahasa pemerograman yang sedikit rumit, jadi untuk membuat aksi seperti slide show pun juga sulit. Tapi setelah saya belajar bootstrap membuat slide show adalah pekerjaan yang sangat mudah. Dan sekarang saya akan memberikan Tutorial “[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3” yang menunjukan bagaimana mudahnya membuat slide show dengan Bootstrap 3.

Assalamualainkum.. Oke, Membuat slide show adalah pekerjaan yang sulit untuk yang baru belajar CSS karena pada dasarnya Slide Show dibuat dengan Javascript. Untuk saya, Js adalah bahasa pemerograman yang sedikit rumit, jadi untuk membuat aksi seperti slide show pun juga sulit. Tapi setelah saya belajar bootstrap membuat slide show adalah pekerjaan yang sangat mudah. Dan sekarang saya akan memberikan Tutorial “[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3” yang menunjukan bagaimana mudahnya membuat slide show dengan Bootstrap 3. :)

Ya, Kita mulai tutorialnya.. Sekarang kita siapkan Alat Dan Bahanya.. 1. 2. 3. 4. 5.

Laptop atau benda sejenisnya. :) Text Editor Tercinta. Browser. Jquery. Versi 1.7 keatas, bias di download di situs resminya Bootstrap 3. Kalo baru belajar jangan nanggung di v.2 langsung aja ke v.3 karena lebih mudah dan lengkap tentunya.. 6. 3 Gambar atau lebih dengan dimensi sama. Setelah semua alat dan bahan terkumpul mari kita mulai membuat Slide Show yang Sangat Mudah ini, Tak udah berlama” perkerjaan ini akan kita selesaikan paling lama 5 menit saja.. OKE….

Langkah 1 Niat.. *Ini Penting..

Langkah 2 Nyalakan Laptop atau benda sejenisnya.. Buka Text editor..

Langkah 3 Buat folder , terserah dimana saja. Misal D: coba.. Lalu buat folder baru di dalamnya untuk wadah file bootstapnya, misal bootstap. Sekarang kita extrak bootstrap 3 yang sudah ada.. Seperti ini..

Hasil struktur Foldernya jadi seperti ini.. coba >bootstrap >>css >>fonts >>js

Langkah 4 Sekarang kita letakan jQuery.min.js di coba>bootstrap>js. Seperti ini..

Lalu kita letakan gambar di paling depan. Seperti ini..

Saya hanya menggunakan 1 gambar yang akan saya gunakan ber ulang karena saya sedang tidak punya gambar bagus. :)

Langkah 5 Sekarang kita mulai Coding.. Copy kode ini, penjelasan kode ada di komentar kodenya.. Monggo.. <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1">



<script src="bootstrap/js/jquery.min.js"> <script src="bootstrap/js/bootstrap.min.js">

Lalu Simpan di folder coba, dengan extensi .html dan nama terserah.. Seperti ini..

Langkah 6 Sekarang kita jalankan file html tadi. Open With browser anda..

Hasilnya seperti ini..

Selesai Jadi sebenarnya kita hanya akan bermain di . carousel dan untuk menambah jumlah slide kita hanya bermain di .item.. Sesuaikan jumlah li di . carousel-indicators dengan jumlah item yangatau jika tidak diperlukan hapus saja.

Sekian Tutorial “[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3”..

Follow Saya untuk mendapat tutorial menarik lainnya.. :) Original Posted By : Arinadi Nur Rohmad

Tentang Penulis

Arinadi Nur Rohmad Code_Start(); Barisan Kata Untuk Aksi Nyata. Code_get_SUCCESS(); :) Sekolah di SMK YAPPI Wonosari, Yogyakarta. Jurusan RPL..