[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3

Ukuran: px

Mulai penontonan dengan halaman:

Download "[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3"

Fanny Makmur
6 tahun lalu
Tontonan:

[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

2 [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. :)

3 Ya, Kita mulai tutorialnya.. Sekarang kita siapkan Alat Dan Bahanya.. 1. Laptop atau benda sejenisnya. :) 2. Text Editor Tercinta. 3. Browser. 4. Jquery. Versi 1.7 keatas, bias di download di situs resminya 5. Bootstrap 3. Kalo baru belajar jangan nanggung di v.2 langsung aja ke v.3 karena lebih mudah dan lengkap tentunya 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..

4 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..

5 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.. <!DOCTYPE html> <html lang="id"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>membuat Slide Yang Sangat Mudah</title>  <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">      </head> <body>

6  <div id="slideshow-mudah" class="carousel slide" data-ride="carousel">  <ol class="carousel-indicators"> <li data-target="#slideshow-mudah" data-slide-to="0" class="active"></li> <li data-target="#slideshow-mudah" data-slide-to="1"></li> <li data-target="#slideshow-mudah" data-slide-to="2"></li> </ol>  <div class="carousel-inner"> <div class="item active"> <img src="1.jpg" alt="slideshow-mudah"> <! Gambar --> <div class="carousel-caption"> <! Penjelasan --> <h3>slide 1 (Judul)</h3> <p>ini adalah Slide 1 (Penjelasan)</p> <div class="item"> <img class="" src="1.jpg" alt="slideshow-mudah"> <! Gambar --> <div class="carousel-caption"> <! Penjelasan --> <h3>slide 2 (Judul)</h3> <p>ini adalah Slide 2 (Penjelasan)</p> <div class="item"> <img src="1.jpg" alt="slideshow-mudah"> <! Gambar --> <div class="carousel-caption"> <! Penjelasan --> <h3>slide 3 (Judul)</h3> <p>ini adalah Slide 3 (Penjelasan)</p>  <a class="left carousel-control" href="#slideshow-mudah" data-slide="prev"> <span class="glyphicon glyphicon-chevron-left"></span> </a> <a class="right carousel-control" href="#slideshow-mudah" data-slide="next"> <span class="glyphicon glyphicon-chevron-right"></span>

7 </a>   <script src="bootstrap/js/jquery.min.js"></script>  <script src="bootstrap/js/bootstrap.min.js"></script> </body> </html> 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..

8 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

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

dokumen-dokumen yang mirip

Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya

Perkenalan Glyphicon Bootstrap dan Cara Mudah Menggunakannya Oleh: Arinadi Nur Rohmad Glyphicon ini berbasis text jadi lebih ringan dan biasa diganti warna seperti huruf pada umumnya yang berbeda dari