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.

[SANGAT MUDAH] Cara 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. 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..
  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..  

Extrak BOOTSTRAP 3

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

Move jQUERY

 

 

 

Lalu kita letakan gambar di paling depan.

Seperti ini..

Gambar

 

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>

    <!-- CSS Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
	<!-- CSS kamu, Panggil CSS buatan mu sendiri di bawah sini seperti biasa -->
	
	<!-- JS untuk IE -->
    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
  
  
  
  
  <!-- Content START -->
  <div id="slideshow-mudah" class="carousel slide" data-ride="carousel">
  <!-- Indicators, Ini adalah Tombol BULET BULET dibawah. item ini dapat dihapus jika tidak diperlukan -->
  <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>

  <!-- Wrapper for slides, Ini adalah Tempat Gambar-->
  <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>
    </div>
	<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>
    </div>
	<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>
      </div>
    </div>
	
   
  </div>

  <!-- Controls, Ini adalah Panah Kanan dan Kiri. item ini dapat dihapus jika tidak diperlukan-->
  <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>
  </a>
</div>
  <!-- Content END -->
  
  
  
  
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="bootstrap/js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

 

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

Seperti ini..

save SLide Show

 

 

Langkah 6

Sekarang kita jalankan file html tadi.

Open With browser anda..

Hasilnya seperti ini..

MUDAH MEMBUAT SLIDESHOW BOOTSTRAP 3

 

 

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


About Author

Arinadi Nur Rohmad

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


Comment & Discussions

  • dani (Guest)
    Mas, setelah slide ke 3, kenapa gambarnya kemudian terbagi 2, setelah gambar ke 3 gambarnya juga tampil tidak berurutan

  • Maaf Ane lupa password, system lupa password jagocoding lg troble..
    layangkan komentar di http://arinadi-nr.blogspot.com
    udah tak repost kesana.. trimakasih

  • Amir Zuhdi Wibowo
    Apakah nanti jika di 764px akan menyesuaikan bentuk element nya jika sudah berubah pxnya?

  • Please LOGIN before if you want to give the comment.