Cara Membuat Pop Up Modal Bootstrap dengan Slider

Dunia Programming - Modal adalah sebuah kotak dialog atau sering di sebut dengan popup dalam bahasa pemrograman, yang menampilkan pesan, gambar atau konfirmasi untuk suatu aksi, anda bisa membuat promosi dengan modal, misalnya anda membuat suatu eksekusi untuk menghapus suatu data pada website maka anda bisa menggunakan modal atau popup untuk membuat pertanyaan konfirmasi seperti misalnya “apakah anda yakin ingin menghapus data penting ini ?”.

Cara Membuat Pop Up Modal Bootstrap dengan Slider

banyak lagi kegunaan dari modal atau popup karena anda juga bisa menampilkan data dalam bentuk modal.
Bootstrap menyediakan sebuah plugin modal yang bisa di gunakan dengan sangat mudah. membuat modal dengan bootstrap caranya sangat mudah.

Namun, beberapa dari kalian pasti pernah menanyakan hal ini

"Bagaimana ya kalau membuat POP UP atau modal disertai dengan slider"

Nah cara ini nanti akan saya jelaskan secara detail kepada kalian, dan langsung saja tanpa perlu basa-basi lagi, langsung saja simak tutorial dibawah ini.

Cara Membuat Pop Up Modal Bootstrap dengan Slider

Pertama, buat folder project latihan kalian, misalkan Belajar, kemudian buka Text Editor kalian, selanjutnya copy Source code HTML dibawah ini kedalam file index.html

HTML

<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container text-center">

<h1> Click Me </h1>
<!-- Large modal -->
<button class="btn btn-default" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

  <!-- Wrapper for slides -->
  <div class="carousel-inner">
    <div class="item active">
     <img class="img-responsive" src="http://placehold.it/1200x600/555/000&text=One" alt="...">
      <div class="carousel-caption">
        One Image
      </div>
    </div>
    <div class="item">
      <img class="img-responsive" src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="...">
      <div class="carousel-caption">
        Another Image
      </div>
    </div>
     <div class="item">
      <img class="img-responsive" src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="...">
      <div class="carousel-caption">
        Another Image
      </div>
    </div>
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
    </div>
  </div>
</div>
</div>

Selanjutnya buat file CSS nya dengan nama style.css, kemudian copy source code dibawah ini

CSS

body {
    padding-top: 20px;
}
.btn-default {
    top: 25%;
    left:25%;
    color: #999;
    background: #fffccc;
} 

Bagaimana hasilnya.? cukup memuaskan bukan, buat kalian yang masih bingung atau belum mengerti dengan penjelasan yang saya jabarkan diatas, silahkan kalian bisa meninggalkan pesan dikolom komentar dibawah ini.