Arinadi NR Blog: [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..

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

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

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

Repost From Jagocoding.com at my ori post

Arinadi NR Blog

Label

12 Oktober 2014

[SANGAT MUDAH] Cara Membuat Slide Show dengan Bootstrap 3

2 komentar:

Arsip Blog

Entri Populer